兩個svg元素在IE10中有奇怪的行爲

我有一個2 svg元素的情況。我已經簡化並刪除了所有可以使用的東西，並且仍然能夠在IE10中重現該效果。 Here是jsfiddle。在Chrome中運行代碼看起來不錯，但在IE10中，形狀完全是黑色的。但是，如果我刪除了它在IE10中的第一個svg。兩個svg元素在IE10中有奇怪的行爲

我認爲這與

<defs> 
    <linearGradient id="fadeout" x2="0" y2="1"> 
     <stop offset="0%" class="dark"></stop> 
     <stop offset="100%" class="light"></stop> 
    </linearGradient> 
    <linearGradient id="fadein" x2="0" y2="1"> 
     <stop offset="0%" class="light"></stop> 
     <stop offset="100%" class="dark"></stop> 
    </linearGradient> 
</defs>

做的，但我不明白爲什麼和怎麼樣！有什麼建議麼？

來源

2013-10-15 Jeanluca Scaljeri

您有多個具有相同ID的元素，這是無效的。文件中的所有ID必須是唯一的。

來源

2013-10-15 15:04:00

好的，thnx。我試圖把id改成一個類[這裏]（http://jsfiddle.net/Xuyzf/4/），但這似乎不起作用。爲什麼不可能？ –

填充是一個[IRI]（http://www.w3.org/TR/SVG/linking.html#IRIReference）它必須是一個ID而不僅僅是任何URL。 –

是否有定義塊一次，讓

兩個svg元素在IE10中有奇怪的行爲

回答

相關問題