剪辑路径在SVG精灵中不起作用

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引用内联精灵就好了。

由于spec告诉我们

，因此这看起来有点奇怪

  

'display'属性不适用于'symbol'元素;从而，   即使'显示'，也不会直接渲染'symbol'元素   property设置为none以外的值，'symbol'元素为   即使在'display'属性上也可用于引用   'symbol'元素或其任何祖先都设置为none。

但是阅读further down规范，显然为什么设置display: none会导致这种意外渲染：

  

'display'属性会影响直接渲染到屏幕外   画布也[...]设置显示：无   'clipPath'元素将阻止给定的子元素   有助于剪切路径。

因此，在display: none上全局设置svg会禁止渲染这些屏幕外画布，从而为您留下不完整的剪辑路径，尽管仍然可以引用它。从根display中删除svg - 属性并将其直接设置为clipPath将表现出相同的行为。

要隐藏你的精灵svg，你可以选择

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

更新

在将clipPath置于符号内时，IE和Firefox似乎对渲染屏幕外画布更加严格。由于符号本身永远不会呈现，因此包含的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>