两个独立的svgs发生碰撞

Question

我有两个单独的svgs

<svg>svg 1 stuff</svg>

然后是另一个svg

<svg> svg 2 stuff </svg>

如果我单独渲染它们就没事了。如果我这样做的话

<svg> svg 1 stuff</svg>
<svg>svg 2 stuff</svg>

似乎风格或css或其他东西是互动的，而svgs看起来很有趣？

每个svg中的样式或css是否独立？

Answer 1

可能存在冲突的CSS。如果它们都在同一个文档中，那么SVG中的任何CSS都将应用于所有内容。后来的规则可能会覆盖之前的规则并影响两个SVG。

或许更有可能的是，他们有id属性的冲突。如果您使用Illustrator等编辑器程序来创建这些文件，则这是一个常见问题。程序将自动为渐变，蒙版和剪切路径等元素生成id属性值。不幸的是，他们倾向于为每个新文件生成相同的ID序列。

id属性在文档中必须是唯一的，因此如果在页面中组合两个SVG时存在重复项，则会发生不可预测的事情。究竟发生了什么取决于浏览器。因此，如果Chrome和Firefox中的文件看起来不同，那么就会发现问题是重复的id属性。

除了手动浏览其中一个SVG并重命名id属性和引用它们的任何内容之外，确实没有简单的方法来解决问题。