HTML渲染多SVG元素时重复显示首个SVG而非第二个的问题

这大概率是SVG内部ID冲突导致的。当多个SVG里的可复用元素（比如渐变、剪裁路径、滤镜这类放在<defs>里的内容）使用了相同的ID值，浏览器会优先加载第一个定义的ID元素，后续SVG引用该ID时会直接调用第一个的内容，最终导致所有SVG都显示成第一个的样子。

解决步骤 #

• 检查所有SVG的内部代码，重点看<defs>标签内的元素ID，确保每个SVG里的可复用元素使用唯一的ID值。比如把第一个SVG的渐变ID改成grad-header，第二个改成grad-content，彻底避免重复。
• 如果是从在线工具导出的SVG，很多会默认生成重复的通用ID（比如svg_1、gradient_0），手动替换这些重复ID即可。
• 无需额外添加包裹元素或类名，核心就是解决ID冲突问题。

错误示例（导致重复显示） #

第一个SVG：

<svg width="100" height="100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" fill="url(#grad)" />
</svg>

第二个SVG（ID重复）：

<svg width="100" height="100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="green" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" fill="url(#grad)" />
</svg>

这种情况下第二个SVG会调用第一个的渐变，最终显示红蓝矩形。

正确示例（正常显示） #

第一个SVG：

<svg width="100" height="100">
  <defs>
    <linearGradient id="grad-horizontal" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" fill="url(#grad-horizontal)" />
</svg>

第二个SVG（唯一ID）：

<svg width="100" height="100">
  <defs>
    <linearGradient id="grad-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="green" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" fill="url(#grad-vertical)" />
</svg>

修改后两个SVG会分别显示红蓝横向渐变和黄绿纵向渐变的矩形。

内容的提问来源于stack exchange，提问作者Md. Shafiul Alam