剪辑路径在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中需要引用其他元素的方式,特别是当a symbol通过a 引入时use.IE11也没有正确渲染,但方式略有不同(引脚中间没有点,但没有像其他方块那样的实心方框).

Answer 1

问题是由第一行造成的

<svg style="display: none">

删除display: none将呈现您的svg引用内联精灵就好了.

由于规范告诉我们,这看起来有点奇怪

'display'属性不适用于'symbol'元素; 因此,即使'display'属性设置为none以外的值,也不会直接呈现'symbol'元素,并且'symbol'元素可用于引用,即使'symbol'元素上的'display'属性或任何它的祖先没有.

但是,在规范中进一步阅读,很明显为什么设置display: none会导致意外渲染:

'display'属性影响直接渲染到屏幕外画布[...]设置display:none对'clipPath'元素的子元素将阻止给定的子元素对剪切路径做出贡献.

因此,display: none全局设置svg禁止渲染这些屏幕外画布,留下不完整的剪辑路径,尽管仍然可以参考.display从根中删除-attribute svg并将其直接设置为clipPath将显示相同的行为.

要隐藏你的精灵svg,你可以去寻找类似的东西

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

更新:

IE和Firefox 在放置符号内部时,对于渲染屏幕外画面似乎更加严格clipPath.由于符号本身永远不会被渲染,因此包含的内容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>