我有两个单独的 svg
<svg>svg 1 stuff</svg>
然后是另一个svg
<svg> svg 2 stuff </svg>
如果我分别渲染它们就可以了。如果我这样做了
<svg> svg 1 stuff</svg>
<svg>svg 2 stuff</svg>
似乎样式或 css 或其他东西正在交互，并且 svg 看起来很有趣？
每个 svg 中的样式或 css 不是独立的吗？
【问题讨论】：
标签： svg
可能存在 CSS 冲突。如果它们都在同一个文档中，那么任何一个 SVG 中的任何 CSS 都将应用于所有内容。后面的规则可能会覆盖前面的规则并影响两个 SVG。
更有可能的是它们有冲突的id 属性。如果您使用 Illustrator 等编辑器程序创建这些文件，这是一个常见问题。该程序将自动为渐变、蒙版和剪切路径等元素生成id 属性值。不幸的是，它们倾向于为每个新文件生成相同的 id 序列。
id 属性在文档中必须是唯一的，因此如果在页面中合并两个 SVG 时出现重复，则会发生不可预知的事情。究竟会发生什么将取决于浏览器。因此，如果文件在 Chrome 和 Firefox 中看起来不同，那么这表明它是重复的 id 属性，这是问题所在。
除了手动检查其中一个 SVG 并重命名 id 属性和任何引用它们的内容之外，确实没有简单的解决方案来解决此问题。
【讨论】：