React中隐藏原始SVG但保留<use>复制元素显示的方案求助

替代display: none的隐藏方案 #

直接给原始SVG设置display: none会让<use>失去引用目标，必须用不破坏DOM存在性的方式隐藏原始SVG：

方法1：将原始SVG移出视口 #

给原始SVG添加样式，把它放到屏幕外，既不占用可视空间，又保持DOM结构完整：

.hidden-original-svg {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

在React中通过状态控制类名切换：

const [hideOriginal, setHideOriginal] = useState(false);

// 原始SVG元素
<svg className={hideOriginal ? 'hidden-original-svg' : ''}>
  {/* 包含可被<use>引用的带id元素，比如<g id={pinId}> */}
</svg>

方法2：通过透明度+缩放隐藏 #

如果移出视口有布局顾虑，可采用透明+缩放到0的方式，同时禁用点击事件避免误操作：

.hidden-original-svg {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  position: absolute;
}

同样通过状态切换类名即可，该方式也能保留原始SVG的DOM，确保<use>正常引用。

为什么自定义CSS变量没生效？ #

你尝试的--map-display变量无效，原因是：<use>引用的是原始SVG的内容，原始SVG的样式不会继承自<use>的父元素，且display属于不可继承属性，无法通过变量传递覆盖其显示状态。

关键注意点 #

• 必须保证原始SVG的DOM始终存在，不能用display: none或卸载组件的方式隐藏，否则<use>会失去引用源。
• 原始SVG上的用户修改（形状、颜色等）会实时同步到<use>元素，因为<use>本质是对原始元素的实时引用。

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