两个 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 必须是唯一的。