svg - 剪辑路径在 SVG Sprite 中不起作用

Question

(现场示例在 http://codepen.io/RwwL/pen/xbNLJp )

我正在使用 <symbol> 在应用程序中包含 SVG元素(有关原因的完整详细信息，请参阅 https://css-tricks.com/svg-symbol-good-choice-icons/)和某些图标 - 包括 clip-path 的图标— 当我在带有 <use> 的页面中包含他们的图标时没有渲染元素。

<svg style="display: none">
  <symbol id="icon-pin" viewBox="0 0 24 24" enable-background="new 0 0 24 24">
    <path fill="none" stroke="#2F3137" stroke-width="2" stroke-miterlimit="10" d="M12 2C8.3 2 5.3 5 5.3 8.7c0 1.2.3 2.3.9 3.3l5.4 9.9c.1.1.2.2.4.2.1 0 .3-.1.4-.2l5.4-9.9c.5-.9.9-2.1.9-3.3C18.7 5 15.7 2 12 2zm0 0" />
    <clipPath id="pin-clip">
        <path d="M12 11.2c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm0 0" />
    </clipPath>
    <path clip-path="url(#pin-clip)" fill="#2F3137" d="M4.5 1.2h15v15h-15z" />
  </symbol>
</svg>
</div>

<h2>Normal inline SVG</h2>
<svg id="inlinePin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" enable-background="new 0 0 24 24">
    <path fill="none" stroke="#2F3137" stroke-width="2" stroke-miterlimit="10" d="M12 2C8.3 2 5.3 5 5.3 8.7c0 1.2.3 2.3.9 3.3l5.4 9.9c.1.1.2.2.4.2.1 0 .3-.1.4-.2l5.4-9.9c.5-.9.9-2.1.9-3.3C18.7 5 15.7 2 12 2zm0 0" />
    <clipPath id="inline-pin-clip">
        <path d="M12 11.2c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm0 0" />
    </clipPath>
    <path clip-path="url(#inline-pin-clip)" fill="#2F3137" d="M4.5 1.2h15v15h-15z" />
</svg>

<h2>Inline SVG using sprite</h2>
<svg>
  <use xlink:href="#icon-pin">
</svg>

这是它的渲染方式:



它在 Chrome/Firefox/Safari 中以同样的方式被破坏，所以它似乎很可能只是我不理解在 SVG 中需要引用其他元素的方式，尤其是当 symbol 时。正在通过 use 拉入. IE11 也没有正确呈现，但呈现方式略有不同(引脚中间没有点，但没有像其他人一样的实心方块)。

Answer 1

问题是由第一行引起的

<svg style="display: none">

删除 display: none将渲染您的 svg 引用内联 Sprite 就好了。

这乍一看似乎有点奇怪，因为 spec告诉我们

The ‘display’ property does not apply to the ‘symbol’ element; thus, ‘symbol’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘symbol’ elements are available for referencing even when the ‘display’ property on the ‘symbol’ element or any of its ancestors is set to none.

但阅读 further down规范很明显为什么设置 display: none导致这种意外的呈现:

The ‘display’ property affects direct rendering into offscreen canvases also [...] Setting display: none on a child of a ‘clipPath’ element will prevent the given child element from contributing to the clipping path.

因此，设置 display: none全局在 svg禁止渲染这些离屏 Canvas ，让您留下不完整的剪辑路径，尽管它仍然可以被引用。删除 display -来自根的属性 svg并将其直接设置为 clipPath将表现出相同的行为。

要隐藏您的 Sprite svg，您可以使用类似的方法

<svg width="0" height="0">

更新:

当放置 clipPath 时，IE 和 Firefox 似乎对渲染屏幕外 Canvas 更加严格。在一个符号内。由于符号本身永远不会被渲染，所包含的 clipPath将继续错过离屏渲染，因此无法有意义地应用于任何元素。你应该把 clipPath就在 IE、FF 和 Chrome 中运行良好的符号之外。

<svg>
    <clipPath id="pin-clip">
        <path d="M12 11.2c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm0 0" />
    </clipPath>
    <symbol id="icon-pin" viewBox="0 0 24 24" enable-background="new 0 0 24 24">
        <path fill="none" stroke="#2F3137" stroke-width="2" stroke-miterlimit="10" d="M12 2C8.3 2 5.3 5 5.3 8.7c0 1.2.3 2.3.9 3.3l5.4 9.9c.1.1.2.2.4.2.1 0 .3-.1.4-.2l5.4-9.9c.5-.9.9-2.1.9-3.3C18.7 5 15.7 2 12 2zm0 0" />
        <path clip-path="url(#pin-clip)" fill="#2F3137" d="M4.5 1.2h15v15h-15z" />
    </symbol>
</svg>