两个svg元素在IE10中有奇怪的行为

Question

我有2个svg元素的情况。我已经简化并删除了我能做的一切，并且仍然可以在IE10中重现效果。 Here是jsfiddle。 在Chrome中运行代码它看起来是正确的，但在IE10中，形状完全是黑色的。但是，如果我删除第一个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>

但我不明白为什么以及怎么做！有什么建议吗？

Answer 1

您有多个具有相同ID的元素，这是无效的。文件中的所有ID必须是唯一的。