Question

我有一组外部定义的SVG：

svgs.svg

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        ... other SVGs ...

        <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>

        <symbol id="star" viewBox="0 0 256 244" clip-path="url(#clip)">
            <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"/>
        </symbol>

        ... other SVGs ...
    </defs>
</svg>

然后使用use元素将其包含在HTLM中：

<svg viewBox="0 0 256 244">
    <use xlink:href="/images/svgs.svg#star"></use>
</svg>

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

svg {
    fill: transparent;
    stroke: #F4C92D;
    stroke-width: 25%;
}

但是笔划显示在多边形之外，应该被裁剪。

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

Fiddle Here

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

通过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页面的顶部（与外部相对）时：

<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>

......所以，我不确定为何在外部定义时它不起作用。我也尝试在自己的SVG文件中定义剪辑路径，但没有运气。

HTML，SVG - 外部SVG无法正常工作的剪辑路径

0 个答案: