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

我有两个svg元素的情况。我已经简化并删除了所有我可以并且仍然能够在IE10中重现的效果。是JSFIDLE。 在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>

---

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

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

ok，thnx。我试图将id更改为类，但似乎不起作用。为什么不可能呢？填充是一个标记，它必须是一个ID，而不仅仅是任何URL。是否需要定义一次块并让用户使用它。还是改变身份证的唯一办法？我不明白。为什么要创建/拥有第一个块呢？我添加了两次相同的svg，仅此而已（它是一个模板）