当使用svg-sprite和多个实例时，svg剪辑路径圆圈失败

我有这个头疼的人，在过去的几个星期里我一直在跳动。很难确定问题起源于何处，因为它具有创造它的特定条件。当使用svg-sprite和多个实例时，svg剪辑路径圆圈失败

这里是一个plnkr演示：

https://plnkr.co/edit/YrBGTBSohmbnZbQ8m2Yo?p=preview（见在Firefox和IE边缘的bug;有些情况下的Chrome也失败的情况下，但无法重现，在plnkr）。

条件：呈现为使用<defs>模式（子画面必须在DEFS模式与角材料的MD-图标元件工作）SVG精灵

图标。
svg图标正在使用剪辑路径圈。
当图标在页面上多次渲染时，但只有当一个实例被隐藏/从DOM中移除时，clip-path圆圈失败。在Firefox中（而且很少在Chrome中），图标将呈现为正方形。在IE Edge中，图标显示为透明。

我的猜测是在浏览器级别的id引用可能存在问题。

来源

2016-03-07 ngDeveloper

你已经具有相同id的页面上的多个元素。您的文件因此无效。如果你做了无效的事情，你的手指就会烧伤。这里没有Firefox或IE bug。 –

@RobertLongson，所以你说当''元素被渲染时，如果你看里面，有一个' ngDeveloper

对，文档中有多个id =“bSVGID_1_”的元素。 –

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

如加拿大国旗SVG，现在工作在所有的浏览器（如一个SVG精灵的一部分）：

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

来源

2016-03-08 00:30:51 ngDeveloper

当使用svg-sprite和多个实例时，svg剪辑路径圆圈失败

回答

相关问题