当 HTML 中存在多个 SVG 元素且它们引用了相同 ID 的内部资源（如 、 中的渐变或符号）时，浏览器会因 ID 唯一性规则而只识别首个定义，导致后续 SVG 渲染异常——常表现为全部显示第一个 SVG 的内容。
当 html 中存在多个 svg 元素且它们引用了相同 id 的内部资源（如 `
在 SVG 规范中，所有 id 属性在整个文档范围内必须唯一。若多个 SVG 片段（尤其是内联 SVG）各自包含
✅ 正确做法：确保每个 SVG 内部资源 ID 全局唯一
推荐为每个 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"></rect></pattern></defs><circle cx="9" cy="9" r="6" fill="url(#lightbulb-pattern0)"></circle></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"></circle></pattern></defs><path d="M10 2l2.5 5.5L17 3l-1.5 7.5L20 14l-7.5 1.5L10 2z" fill="url(#star-pattern0)"></path></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 自包含、自隔离”的编码习惯，可彻底规避此类问题，并提升组件复用性与可维护性。
