为何隐藏第一个SVG时，第二个SVG的部分元素会消失？

核心问题出在两个SVG内部存在重复的ID——浏览器会把HTML文档里的ID视为全局唯一标识，当你隐藏第一个SVG时，浏览器会把它内部带ID的元素（比如渐变、滤镜、clipPath这类被引用的资源）从全局上下文里移除，导致第二个SVG里引用这些ID的元素找不到对应资源，自然就显示异常了。

具体解决方案 #

• 给每个SVG内部的所有带ID的元素添加唯一前缀/后缀，比如第一个SVG里的渐变ID改成header-grad-1，第二个改成content-grad-1，同时把SVG内部引用这些ID的地方（比如fill="url(#grad-1)"）也同步修改。
• 确保每个SVG的<defs>块是独立的，不要共用外部defs或者两个SVG用相同的defs内容却没改ID。
• 如果你用了<use>标签复用元素，也要给被复用的元素加上唯一ID，或者直接把复用的内容复制到每个SVG内部，避免跨SVG的ID引用。

验证步骤 #

1. 打开你的SVG代码，搜索所有id=属性，把两个SVG里重复的ID全部标记出来。
2. 逐个修改这些重复ID，保证每个ID在整个HTML文档里只出现一次。
3. 同步修改所有引用这些ID的地方（比如url(#xxx)、xlink:href="#xxx"）。
4. 再次测试用display:none或visibility:hidden隐藏第一个SVG，第二个SVG应该能正常显示所有元素了。

错误示例（重复ID） #

<!-- 第一个SVG -->
<svg id="svg1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000"/>
      <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
  </defs>
  <rect fill="url(#grad1)" width="100" height="100"/>
</svg>

<!-- 第二个SVG -->
<svg id="svg2">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000"/>
      <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
  </defs>
  <rect fill="url(#grad1)" width="100" height="100"/>
</svg>

修正后示例（唯一ID） #

<!-- 第一个SVG -->
<svg id="svg1">
  <defs>
    <linearGradient id="grad1-svg1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000"/>
      <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
  </defs>
  <rect fill="url(#grad1-svg1)" width="100" height="100"/>
</svg>

<!-- 第二个SVG -->
<svg id="svg2">
  <defs>
    <linearGradient id="grad1-svg2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000"/>
      <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
  </defs>
  <rect fill="url(#grad1-svg2)" width="100" height="100"/>
</svg>

这样修改后，隐藏第一个SVG时，第二个SVG引用的是自己内部的唯一ID资源，就不会受影响了。

内容的提问来源于stack exchange，提问作者Yassir Rabiea