Fatal编程技术网
  • html/
  • HTML，SVG-外部SVG的剪辑路径不工作

HTML，SVG-外部SVG的剪辑路径不工作

html css svg

HTML，SVG-外部SVG的剪辑路径不工作,html,css,svg,clip-path,Html,Css,Svg,Clip Path,我有一个外部定义的SVG组： svgs.svg 但是剪辑路径不起作用。我正在通过CSS向SVG添加笔划： svg { fill: transparent; stroke: #F4C92D; stroke-width: 25%; } 但是笔划显示在多边形的外部，应该进行剪裁 当SVG在HTML文档的顶部定义时，这种方法很好用 。。。但外部定义时没有骰子 通过CSS添加剪辑路径无效： svg { clip-path: url('/images/svgs.svg#c

我有一个外部定义的SVG组：

svgs.svg

但是剪辑路径不起作用。我正在通过CSS向SVG添加笔划：

svg {
    fill: transparent;
    stroke: #F4C92D;
    stroke-width: 25%;
}
但是笔划显示在多边形的外部，应该进行剪裁

当SVG在HTML文档的顶部定义时，这种方法很好用

。。。但外部定义时没有骰子

通过CSS添加剪辑路径无效：

svg {
    clip-path: url('/images/svgs.svg#clip');
    ...
}
理想的效果是SVG上的笔划只出现在定义的多边形内部（如链接的小提琴）

编辑#1

将剪辑路径添加到HTML元素时，它也不起作用：

<svg viewBox="0 0 256 244" clip-path="url(/images/svgs.svg#clip)">
    <use xlink:href="/images/svgs.svg#star"></use>
</svg>
但是。。。当在HTML页面顶部定义剪辑路径（与外部相反）时，它确实起作用：


...
... 其他标记。。。
。。。所以，我不确定为什么它在外部定义时不起作用。我还尝试在自己的SVG文件中定义剪辑路径，但没有成功。

@RobertLongson我不知道你的意思。有一个SVG文件
svgs.SVG
，一个HTML文件
index.HTML
和一个链接的CSS文件
styles.CSS
。CSS规则都是在外部CSS文件中定义的。填充和笔划工作正常，是剪辑路径不起作用。你在哪个浏览器上测试它？@RobertLongson Safari和Chrome bothAnd当你尝试Firefox时…@RobertLongson我不确定你的意思。有一个SVG文件
svgs.SVG
，一个HTML文件
index.HTML
和一个链接的CSS文件
styles.CSS
。CSS规则都是在外部CSS文件中定义的。填充和笔划工作正常，但剪辑路径不起作用。您在哪个浏览器上测试此功能？@RobertLongson Safari和Chrome bothAnd当您尝试Firefox时。。。 
svg {
    clip-path: url('/images/svgs.svg#clip');
    ...
}

<svg viewBox="0 0 256 244" clip-path="url(/images/svgs.svg#clip)">
    <use xlink:href="/images/svgs.svg#star"></use>
</svg>

<html>
  <head>...</head>
  <body>

    <svg style="width: 0; height: 0;">
        <defs>
            <clipPath id="clip" viewBox="0 0 256 244">
                <polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
            </clipPath>
        </defs>
    </svg>

    ... other markup ...

    <svg viewBox="0 0 256 244" clip-path="url(#clip)">
        <use xlink:href="/images/svgs.svg#star"></use>
    </svg>

  </body>
</html>