當使用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剪輯路徑圓圈失敗

回答

相關問題