无需JavaScript，如何更新SVG组内文本值及符号复用传值？

当然可以！不需要JavaScript就能实现这个需求，核心思路是利用SVG <symbol> 结合自定义数据属性（data-*）和CSS的 attr() 函数，通过伪元素来渲染每个复用实例的独立文本。下面是具体实现步骤和修改后的代码：

实现原理 #

1. 将可复用的图形组件从<g>改为<symbol>（<symbol>是SVG专为复用设计的元素，自带隔离作用，还能定义viewBox确保缩放一致性）。
2. 在每个<use>标签上添加自定义数据属性（比如data-label），用来存储每个实例的独立文本值。
3. 使用CSS选中<symbol>内的文本占位元素，通过:after伪元素结合attr()函数，读取<use>上的data-label值作为显示文本。

修改后的SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 800 800">
  <defs>
    <!-- 将g改为symbol，定义viewBox确保复用的缩放一致性 -->
    <symbol id="Initials" viewBox="0 0 400 400">
      <circle cx="200" cy="200" r="80" class="cls-9"/>
      <!-- 文本占位元素，用来挂载伪元素 -->
      <text class="label-placeholder" fill="white" font-size="50" x="200" y="220" text-anchor="middle" dominant-baseline="middle"></text>
    </symbol>
    
    <style>
      /* 利用伪元素读取use上的data-label属性值 */
      #Initials .label-placeholder:after {
        content: attr(data-label);
      }
      
      /* 将use上的data-label属性传递给内部的占位文本元素 */
      use[data-label] #Initials .label-placeholder {
        data-label: attr(data-label);
      }
      
      /* 可选：给背景圆设置默认颜色 */
      .cls-9 {
        fill: #333;
      }
    </style>
  </defs>
  
  <!-- 第一个复用实例，传递文本"10" -->
  <use href="#Initials" data-label="10" />
  <!-- 第二个复用实例，传递文本"20" -->
  <use href="#Initials" x="200" y="0" data-label="20" />
  <!-- 可以继续添加更多实例，自定义文本 -->
  <use href="#Initials" x="0" y="200" data-label="30" />
</svg>

关键细节说明 #

• <symbol>的viewBox定义了组件的局部坐标系统，确保复用元素在不同位置都能正确缩放和定位。
• text-anchor="middle"和dominant-baseline="middle"让文本完美居中在圆形背景内，避免手动计算偏移量。
• CSS中的attr(data-label)会直接读取<use>标签上的自定义属性值，实现每个实例的文本独立化。
• 这种方案完全基于SVG和CSS标准，不需要任何JavaScript代码，兼容性良好（支持现代浏览器，包括Chrome、Firefox、Safari 15+）。

如果需要支持更旧的浏览器，也可以采用另一种方案：在<symbol>内定义多个<text>元素，然后通过CSS类控制显示/隐藏，但这种方式灵活性不如data-*属性+attr()的方案。

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