如何通过传入文本参数复用含<text>元素的SVG <symbol>？

一、原生SVG能否通过参数直接修改Symbol内的文本内容？ #

不行。目前原生SVG的<use>元素仅支持覆盖元素属性（如fill、transform），无法直接传入参数修改<symbol>内部的文本节点内容。你尝试的<ref>和<param>属于早期的SVG Parameters提案，该提案未被主流浏览器实现，属于未落地的规范，因此无法生效。

二、可行的替代方案 #

1. CSS变量配合伪元素（仅内联SVG嵌入HTML场景） #

若SVG直接嵌入HTML，可给<use>添加自定义属性，通过CSS变量注入文本：

<style>
  use[text-content]::after {
    content: attr(text-content);
    position: absolute;
    x: 40px;
    y: 50px;
    font-family: Helvetica;
    font-weight: bold;
    text-anchor: middle;
    fill: white;
    font-size: 10px;
  }
</style>

<svg>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,125,0);stop-opacity:1" />
    </linearGradient>
    <polygon id="hexagon" points="10,0 1.5,5 1.5,15 10,20 18.5,15 18.5,5" />
    <polygon id="checkmark" points="3.5,21 5,19 7.5,22 15,14 16,15.5 7.5,24.5"/>
    <symbol id="awsHex" viewBox="2 -2 300 300">
      <use href="#hexagon" transform="translate(0 0) scale(4)" fill="url(#grad1)" stroke="#FFD600" stroke-width="0.5" />
      <use href="#hexagon" transform="translate(30 14)" fill="#00AA00" opacity="100%" />
      <use href="#checkmark" transform="translate(30,5.5)" fill="#FFF" />
    </symbol>
  </defs>

  <use href="#awsHex" transform="translate(0 0)" text-content="节点1" />
  <use href="#awsHex" transform="translate(120 0)" text-content="节点2" />
</svg>

2. JavaScript动态修改文本 #

需要灵活控制或SVG为独立文件时，用JS遍历<use>元素动态插入文本：

<svg id="svgContainer">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,125,0);stop-opacity:1" />
    </linearGradient>
    <polygon id="hexagon" points="10,0 1.5,5 1.5,15 10,20 18.5,15 18.5,5" />
    <polygon id="checkmark" points="3.5,21 5,19 7.5,22 15,14 16,15.5 7.5,24.5"/>
    <symbol id="awsHex" viewBox="2 -2 300 300">
      <use href="#hexagon" transform="translate(0 0) scale(4)" fill="url(#grad1)" stroke="#FFD600" stroke-width="0.5" />
      <use href="#hexagon" transform="translate(30 14)" fill="#00AA00" opacity="100%" />
      <use href="#checkmark" transform="translate(30,5.5)" fill="#FFF" />
      <text class="symbol-text" x="40" y="50" font-family="Helvetica" font-weight="bold" text-anchor="middle" fill="white" font-size="10"></text>
    </symbol>
  </defs>

  <use href="#awsHex" transform="translate(0 0)" data-text="节点A" />
  <use href="#awsHex" transform="translate(120 0)" data-text="节点B" />
</svg>

<script>
  document.querySelectorAll('use[href="#awsHex"]').forEach(useEl => {
    const shadowRoot = useEl.shadowRoot || useEl.querySelector('svg');
    if (shadowRoot) {
      const textEl = shadowRoot.querySelector('.symbol-text');
      textEl.textContent = useEl.getAttribute('data-text');
    }
  });
</script>

3. SVG模板克隆（无JS原生方案） #

不想依赖JS时，可将基础图形作为组件，每次复用时手动克隆并添加文本：

<svg>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,125,0);stop-opacity:1" />
    </linearGradient>
    <polygon id="hexagon" points="10,0 1.5,5 1.5,15 10,20 18.5,15 18.5,5" />
    <polygon id="checkmark" points="3.5,21 5,19 7.5,22 15,14 16,15.5 7.5,24.5"/>
  </defs>

  <g transform="translate(0 0)">
    <use href="#hexagon" transform="translate(0 0) scale(4)" fill="url(#grad1)" stroke="#FFD600" stroke-width="0.5" />
    <use href="#hexagon" transform="translate(30 14)" fill="#00AA00" opacity="100%" />
    <use href="#checkmark" transform="translate(30,5.5)" fill="#FFF" />
    <text x="40" y="50" font-family="Helvetica" font-weight="bold" text-anchor="middle" fill="white" font-size="10">节点X</text>
  </g>

  <g transform="translate(120 0)">
    <use href="#hexagon" transform="translate(0 0) scale(4)" fill="url(#grad1)" stroke="#FFD600" stroke-width="0.5" />
    <use href="#hexagon" transform="translate(30 14)" fill="#00AA00" opacity="100%" />
    <use href="#checkmark" transform="translate(30,5.5)" fill="#FFF" />
    <text x="40" y="50" font-family="Helvetica" font-weight="bold" text-anchor="middle" fill="white" font-size="10">节点Y</text>
  </g>
</svg>

三、SVG标准相关情况 #

你提到的SVG Parameters规范确实是W3C曾经的提案，目标是支持给Symbol传递参数修改内容，但该提案目前处于停滞状态，未被主流浏览器实现，短期内无法依赖此方案解决问题。

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