当 HTML 页面中嵌入多个 SVG 元素，且它们引用了相同 ID 的内部资源（如 <pattern>、<defs> 子元素）时，浏览器会按文档顺序解析并复用首个匹配的 ID，导致后续 SVG 显示错误内容。
当 html 页面中嵌入多个 svg 元素，且它们引用了相同 id 的内部资源（如 `
在 SVG 中，<defs> 内定义的资源（例如 <pattern>、<linearGradient>、<clipPath> 等）通过 id 属性标识，并被其他元素通过 url(#id) 引用。关键点在于：SVG ID 是全局作用域的——不仅限于单个 <svg> 标签内部，而是整个 HTML 文档内唯一。因此，若两个独立的 <svg> 块均包含 <pattern id="pattern0">，且各自用 fill="url(#pattern0)" 引用，浏览器将始终解析为第一个定义的 pattern0，第二个 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：本应显示蓝色圆点，但实际仍显示红色（复用第一个 pattern0） -->
<svg width="100" height="100">
<defs>
<pattern id="pattern0" patternUnits="userSpaceOnUse" width="10" height="10">
<circle cx="5" cy="5" r="3" fill="blue"/> <!-- 此定义被忽略 -->
</pattern>
</defs>
<rect width="100" height="100" fill="url(#pattern0)"/>
</svg>✅ 正确解决方案：确保 ID 全局唯一
为每个 SVG 的内部资源分配唯一 ID，并同步更新所有引用：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<!-- 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="10" height="10">
<circle cx="5" cy="5" r="3" fill="blue"/>
</pattern>
</defs>
<rect width="100" height="100" fill="url(#pattern0_b)"/>
</svg>⚠️ 注意事项
- 不要依赖 id 重名 + 后续覆盖 —— SVG 规范明确要求 id 在整个文档中唯一，重复 ID 属于无效 HTML/SVG，行为不可靠；
- 若 SVG 来自第三方库或动态生成，建议在注入前对 id 属性做命名空间化处理（如添加哈希或组件前缀）；
- 可使用 <symbol> + <use> 模式替代重复 <defs>，但需注意 <use> 的跨 SVG 引用限制（推荐同文档内使用）；
- 开发时启用浏览器开发者工具 → Elements 面板，检查实际生效的 fill 计算值，快速定位是否引用了预期的 #id。
✅ 总结
多 SVG 场景下渲染异常，90% 源于 <defs> 内资源 ID 冲突。牢记：SVG 中的 id 是文档级唯一标识符，而非 SVG 元素局部作用域。通过为每个 SVG 的 defs 子元素生成唯一 ID 并保持引用一致，即可彻底解决“只渲染第一个 SVG”的问题。
