这个问题我之前在项目里碰到过，算是SVG在浏览器渲染和React组件复用结合时的一个典型坑，下面拆解原因和对应的解决方法：

核心原因 #

1. SVG内部资源ID冲突：设计师给的SVG里大概率包含带ID的内部资源（比如<defs>里的渐变、滤镜、<symbol>标签）。当你在两个div里重复渲染同一个SVG组件时，DOM中会出现多个相同ID的元素。浏览器只会把第一个ID对应的资源注册到文档中，当第一个div被设为display: none后，浏览器的渲染优化机制会回收不可见元素的资源，导致第二个SVG找不到对应的引用，直接显示灰盒。
2. 共享渲染上下文被回收：如果你的SVG是通过<use>标签引用同一个隐藏的SVG定义，或者React组件错误地复用了同一个SVG DOM节点，那么当第一个容器隐藏时，对应的渲染上下文会被浏览器暂停/回收，第二个依赖该上下文的SVG自然无法正常渲染。

解决方法 #

1. 给每个SVG实例生成唯一ID（最推荐） #

在React中，你可以通过给SVG组件传入前缀/后缀参数，动态修改内部资源的ID，确保每个实例的ID唯一。比如：

// 封装带唯一ID的SVG组件
function CustomIcon({ idSuffix }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        {/* 动态生成唯一ID */}
        <linearGradient id={`icon-gradient-${idSuffix}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#4A90E2" />
          <stop offset="100%" stopColor="#357ABD" />
        </linearGradient>
      </defs>
      {/* 引用动态生成的ID */}
      <path d="M12 2L2 7L12 12L22 7L12 2Z" fill={`url(#icon-gradient-${idSuffix})`} />
    </svg>
  );
}

// 使用时给每个实例传不同的后缀
<div style={{ display: 'none' }}>
  <CustomIcon idSuffix="first" />
</div>
<div>
  <CustomIcon idSuffix="second" />
</div>

这样每个SVG的内部资源ID都是独立的，彼此不会干扰，即使第一个容器隐藏，第二个的资源依然能被正常识别。

2. 将共享资源提取到全局<defs> #

把SVG中所有可复用的资源（渐变、滤镜等）单独提取到页面的全局<defs>里，不要放在每个SVG实例内部。这样不管哪个容器隐藏，全局资源始终存在，所有SVG都能正常引用：

<!-- 页面顶部放置全局资源，设为不可见但不使用display:none -->
<svg style="visibility: hidden; position: absolute;">
  <defs>
    <linearGradient id="global-icon-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stopColor="#4A90E2" />
      <stop offset="100%" stopColor="#357ABD" />
    </linearGradient>
  </defs>
</svg>

<!-- 每个SVG实例直接引用全局ID -->
<div style={{ display: 'none' }}>
  <svg viewBox="0 0 24 24" fill="none">
    <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="url(#global-icon-gradient)" />
  </svg>
</div>
<div>
  <svg viewBox="0 0 24 24" fill="none">
    <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="url(#global-icon-gradient)" />
  </svg>
</div>

3. 替换display: none为其他隐藏方式 #

如果你的布局允许保留元素占位空间，可以用visibility: hidden或opacity: 0替代display: none。这两种方式不会让浏览器回收元素的渲染上下文，第一个容器隐藏后，第二个SVG依然能正常渲染：

.hidden-container {
  visibility: hidden;
  /* 或者 opacity: 0; */
}

4. 确保React组件每次渲染生成独立DOM节点 #

如果你是通过Webpack的@svgr/webpack等工具把SVG转换为React组件，默认每次渲染都会生成新的DOM节点，不会复用。但如果是你自己封装的组件，要避免在组件外部缓存DOM元素，确保每次调用都生成全新的SVG结构。

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