如何为含多个<g>元素的内联SVG指定要渲染的目标ID？

问题场景 #

原本通过<img src="myfile.svg#multicolor-onLight">加载独立SVG文件时，可通过锚点指定要渲染的<g>元素。但将SVG内联到页面后，发现无法选择特定<g>，默认会渲染所有未隐藏的内容，而非指定的目标片段。

示例SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" fill="none">
  <defs>
    <path id="singlecolor" d="M94.9588 20.6182L86.2126 5.20824V5H84.9631H68.5119H66.6377L66.4295"/>
    <g id="multicolor">
      <path d="M48 73.2971L52.7543 81.8L57.6 90.3943H48H38.4L43.1543 81.8L48 73.2971Z" fill="#E92D78" />
    </g>
  </defs>
  <g id="multicolor-onLight">
    <use href="#multicolor"/>
  </g>
  <g id="multicolor-onDark">
    <use href="#multicolor"/>
  </g>
  <g id="singlecolor-onDark">
    <use href="#singlecolor"/>
  </g>
</svg>

解决方案 #

内联SVG不会自动识别锚点逻辑，需要手动控制元素的显示状态：

1. 默认隐藏所有可选变体
   给所有需要切换的<g>元素添加统一的CSS类，默认隐藏：

   .svg-variant {
     display: none;
   }
   

   然后给目标<g>加上这个类：

   <g id="multicolor-onLight" class="svg-variant">...</g>
   <g id="multicolor-onDark" class="svg-variant">...</g>
   <g id="singlecolor-onDark" class="svg-variant">...</g>
   

2. 显示指定的元素
   选择要渲染的目标<g>，通过以下方式设置其显示：

   • 直接内联样式：

     <g id="multicolor-onLight" class="svg-variant" style="display: block;">...</g>
     

   • 或者在页面的<style>中指定：

     #multicolor-onLight {
       display: block;
     }
     

3. 动态切换（可选）
   如果需要在页面交互中切换不同变体，用JavaScript控制display属性：

   // 显示亮色主题的多色图标
   function showMulticolorOnLight() {
     document.querySelectorAll('.svg-variant').forEach(el => el.style.display = 'none');
     document.getElementById('multicolor-onLight').style.display = 'block';
   }
   

关键说明 #

独立SVG通过<img>加载时，锚点#xxx会让浏览器只渲染指定ID的元素；但内联SVG属于页面DOM的一部分，所有未隐藏的元素都会默认渲染，因此必须通过CSS/JS手动控制显示状态来实现类似锚点的效果。

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