SVG填充的问题="；url（#）"；

我正在动态创建几个具有相同结构的SVG

我遇到的问题是，我必须根据渐变ID引用渐变，因此当存在多个SVG时，ID会发生冲突并导致意外结果是否有方法通过ID引用其他SVG元素？我可以将选择限制在SVG元素内吗

---

第一部分 在一个简单的例子中，我有两个具有相同结构的SVG——它们将由一些javascript动态创建。问题：请注意，第二个SVG使用第一个SVG的渐变：

这是第一个SVG，它将“#梯度”定义为红黑。


这是第二个SVG。它最终显示的是一个红黑圆圈，而不是红绿圆圈。

是的，您确实需要使用唯一的id值。若你们使用的是唯一的id值，不要把它放在显示器上：无（使用一些其他机制使它在屏幕外或不可见）。或者停止使用内联SVG，并通过、或标记包含它。@RobertLongson我很好奇为什么“display:none；”会破坏它——从技术上讲，它仍然在DOM中，“display:none；”不应该被继承。这在规范中是否存在？因为display:none关闭元素的CSS，所有子体（根据HTML规范）和SVG中的许多属性实际上都作为CSS属性处理，例如fill、stop color等@RobertLongson有意义，谢谢。作为最后的努力，让它更干净——SVG上是否没有任何选项可以将其元素“沙盒”到当前SVG，这样ID就不会泄漏？PS：如果您提交答案，我很乐意接受。如果您愿意，我也可以自己提交。您可以使用

display:none

而不是

position:absolute；宽度：0；身高：0；左：-10em