当使用svg-sprite和多个实例时，svg剪辑路径循环失败。

Question

我这几个星期来一直在抓人。很难确定问题起源于何处，因为它具有造成问题的特定条件。

下面是一个plnkr演示：

https://plnkr.co/edit/YrBGTBSohmbnZbQ8m2Yo?p=preview (参见Firefox和IE中的bug；在某些情况下，Chrome也会失败，但却无法在plnkr中复制)。

条件：

• 使用<defs>模式呈现为svg-sprite的图标(精灵必须处于防御模式，才能使用角材料的md-图标元素)。
• svg图标正在使用剪辑路径圆.
• 当图标在页面上呈现不止一次时，只有当一个实例被隐藏/从DOM中删除时，剪辑路径循环才会失败。在Firefox中(在Chrome中也很少)，图标将被呈现为正方形。在IE中，图标显示为透明。

我猜想，在浏览器级别上，id引用可能有问题。

Answer 1

我们在不使用任何id="..."属性的情况下重新构建svg，从而解决了这个问题。这意味着我们必须删除<clipPath id="...">并在没有它们的情况下构建svg。

例如，加拿大标记svg，它现在可以在所有浏览器中工作(作为sprite的一部分)：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <circle style="fill:#FFFFFF;" cx="25" cy="25" r="25"/>
    <path style="fill:#BF0A30;" d="M13.1,26.2l-1.4,0.5l6.4,5.6c0.5,1.4-0.2,1.9-0.6,2.6l6.9-0.9l-0.2,7h1.4l-0.1-7l6.9,0.8
        C32,33.9,31.6,33.4,32,32l6.4-5.3l-1.1-0.4c-0.9-0.7,0.4-3.4,0.6-5.1c0,0-3.7,1.3-4,0.6l-1-1.8l-3.4,3.7c-0.4,0.1-0.5-0.1-0.6-0.4
        l1.6-7.8L28,16.9c-0.2,0.1-0.4,0-0.6-0.2L25,11.9l-2.5,5c-0.2,0.2-0.4,0.2-0.5,0.1l-2.4-1.3l1.4,7.7c-0.1,0.3-0.4,0.4-0.7,0.2
        l-3.2-3.7c-0.4,0.7-0.7,1.8-1.3,2c-0.6,0.2-2.4-0.5-3.7-0.7C12.7,22.7,14,25.3,13.1,26.2L13.1,26.2z"/>
    <path style="fill:#BF0A30;" d="M7.8,6.9C3,11.5,0,17.8,0,24.9s3,13.6,7.9,18.2V6.9z"/>
    <path style="fill:#BF0A30;" d="M42.1,43.1c4.8-4.6,7.9-10.9,7.9-18c0-7.2-3-13.6-7.9-18.2L42.1,43.1z"/>
    <path style="fill:#686868;" d="M25,0.1c13.7,0,24.9,11.2,24.9,24.9S38.7,49.9,25,49.9S0.1,38.7,0.1,25S11.3,0.1,25,0.1 M25,0
        C11.2,0,0,11.2,0,25s11.2,25,25,25s25-11.2,25-25S38.8,0,25,0L25,0z"/>
</svg>