当 HTML 中存在多个 SVG 元素且它们引用了相同 ID 的内部资源（如 、 中的渐变或符号）时，浏览器会因 ID 唯一性规则而只识别首个定义，导致后续 SVG 渲染异常——常表现为全部显示第一个 SVG 的内容。

当 html 中存在多个 svg 元素且它们引用了相同 id 的内部资源（如 ``、`` 中的渐变或符号）时，浏览器会因 id 唯一性规则而只识别首个定义，导致后续 svg 渲nder异常——常表现为全部显示第一个 svg 的内容。

在 SVG 规范中，所有 id 属性在整个文档范围内必须唯一。若多个 SVG 片段（尤其是内联 SVG）各自包含 且其中定义了同名资源（例如 ），浏览器将仅保留文档中首次出现的该 ID 定义，后续同名定义会被忽略。此时，若第二个 SVG 通过 fill="url(#pattern0)" 引用该 pattern，则实际填充的是第一个 SVG 中定义的 pattern0，从而造成“两个 SVG 都显示第一个图形”的错觉。

✅ 正确做法：确保每个 SVG 内部资源 ID 全局唯一

推荐为每个 SVG 的 子元素使用带作用域前缀的 ID，例如：

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

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

下载

<!-- 第一个 SVG -->
<svg class="icon-lightbulb" width="18" height="18" viewBox="0 0 18 18">
  <defs>
    <pattern id="lightbulb-pattern0" patternUnits="userSpaceOnUse" width="4" height="4">
      <rect width="4" height="4" fill="#FFD700"/>
    </pattern>
  </defs>
  <circle cx="9" cy="9" r="6" fill="url(#lightbulb-pattern0)"/>
</svg>

<!-- 第二个 SVG（注意 ID 已变更） -->
<svg class="icon-star" width="20" height="20" viewBox="0 0 20 20">
  <defs>
    <pattern id="star-pattern0" patternUnits="userSpaceOnUse" width="3" height="3">
      <circle cx="1.5" cy="1.5" r="0.8" fill="#FF6B6B"/>
    </pattern>
  </defs>
  <path d="M10 2l2.5 5.5L17 3l-1.5 7.5L20 14l-7.5 1.5L10 2z" fill="url(#star-pattern0)"/>
</svg>

⚠️ 注意事项

• 避免直接复制粘贴 SVG 代码：尤其含 的 SVG，务必检查并重命名所有 id（包括 id、xlink:href、fill/stroke 中的 url(#...)）；
• 不依赖 xlink:href（已废弃）：现代 SVG 应使用 href 属性（如 ），但仍需确保目标 ID 唯一；
• 动态生成场景更需谨慎：若通过 JavaScript 插入多个 SVG，建议在插入前对 中的 ID 进行哈希化或添加随机后缀（如 pattern0_${Date.now()}）；
• 验证工具辅助：可使用浏览器开发者工具 → Elements 面板搜索 id="pattern0"，确认是否仅存在一个匹配项。

✅ 总结

SVG 渲染“只显示第一个”并非渲染引擎 Bug，而是严格遵循 HTML/SVG ID 唯一性规范的必然结果。根本解法不是隐藏或删除首个 SVG，而是为每个 SVG 独立定义无冲突的资源 ID。养成“每个内联 SVG 自包含、自隔离”的编码习惯，可彻底规避此类问题，并提升组件复用性与可维护性。