当 HTML 中存在多个 SVG 元素且它们引用了相同 ID 的内部资源（如 、 子元素）时，浏览器会因 ID 唯一性规则而复用第一个定义，导致后续 SVG 渲染异常。

当 html 中存在多个 svg 元素且它们引用了相同 id 的内部资源（如 ``、`` 子元素）时，浏览器会因 id 唯一性规则而复用第一个定义，导致后续 svg 渲染异常。

在 SVG 中，所有通过 id 属性定义的资源（例如 、、、 等）必须在整个文档中全局唯一。若多个 SVG 元素中各自定义了同名 ID（如都使用 id="pattern0"），或多个 SVG 共享同一份内联 且其中 ID 冲突，浏览器将仅识别首个匹配项——这正是“第二个 SVG 渲染出第一个 SVG 外观”的根本原因。

? 问题复现示例

以下代码会导致两个

<svg width="100" height="100">
  <defs>
    <pattern id="pattern0" patternUnits="userSpaceOnUse" width="10" height="10">
      <circle cx="5" cy="5" r="3" fill="red"/>
    </pattern>
  </defs>
  <rect width="100" height="100" fill="url(#pattern0)" />
</svg>

<svg width="100" height="100">
  <defs>
    <pattern id="pattern0" patternUnits="userSpaceOnUse" width="8" height="8">
      <rect x="0" y="0" width="4" height="4" fill="blue"/>
    </pattern>
  </defs>
  <rect width="100" height="100" fill="url(#pattern0)" />
</svg>

✅ 结果：第二个

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

✅ 正确解决方案：确保 ID 全局唯一

为每个 SVG 的内部资源分配独立 ID，并同步更新所有引用：

<!-- SVG 1 -->
<svg width="100" height="100">
  <defs>
    <pattern id="pattern0_a" patternUnits="userSpaceOnUse" width="10" height="10">
      <circle cx="5" cy="5" r="3" fill="red"/>
    </pattern>
  </defs>
  <rect width="100" height="100" fill="url(#pattern0_a)" />
</svg>

<!-- SVG 2 -->
<svg width="100" height="100">
  <defs>
    <pattern id="pattern0_b" patternUnits="userSpaceOnUse" width="8" height="8">
      <rect x="0" y="0" width="4" height="4" fill="blue"/>
    </pattern>
  </defs>
  <rect width="100" height="100" fill="url(#pattern0_b)" />
</svg>

? 提示：若 SVG 是动态生成或由组件库注入（如 React/Vue），建议在构建时自动添加哈希或序列后缀（如 id="pattern-${uuid()}"），避免硬编码冲突。

⚠️ 其他常见 ID 冲突场景

• 多个 SVG 共用同一外部 （如置于 顶部），但未隔离作用域；
• 使用 引用图标时，多个 SVG 中图标 ID 重复；
• 通过 innerHTML 批量插入 SVG 片段，未做 ID 去重处理。

✅ 最佳实践总结

• ✅ 每个 SVG 内部 资源 ID 必须唯一（推荐加命名空间前缀，如 icon-home-pattern）；
• ✅ 避免跨 SVG 共享未隔离的 ；
• ✅ 使用开发工具（Chrome DevTools → Elements → 搜索 #pattern0）快速定位重复 ID；
• ✅ 对于可复用图标，优先采用 + 方式，并确保 id 全局唯一。

遵循以上原则，即可彻底解决“多个 SVG 渲染相同内容”的 ID 冲突问题，保障 SVG 行为可预测、可维护。