如何在SVG动画中实现文本内容的参数化复用？

在SVG动画中实现文本内容的参数化复用，可以通过以下几种方法来实现：

1. 使用 <text> 元素和 <tspan> 元素

你可以使用 <text> 元素来定义文本内容，并使用 <tspan> 元素来对文本进行分段和复用。通过设置 x 和 y 属性，你可以控制每个 <tspan> 的位置。

<svg width="200" height="100">
  <text x="10" y="20" font-family="Arial" font-size="14">
    <tspan id="param1">Hello</tspan>
    <tspan x="10" y="40" id="param2">World</tspan>
  </text>
</svg>

你可以通过 JavaScript 动态修改 <tspan> 的内容来实现参数化复用。

document.getElementById('param1').textContent = 'Hi';
document.getElementById('param2').textContent = 'Universe';

2. 使用 <use> 元素

你可以将文本内容定义为一个 <text> 元素，并使用 <use> 元素来复用这个文本内容。通过设置 x 和 y 属性，你可以控制复用的文本的位置。

<svg width="200" height="100">
  <defs>
    <text id="reusableText" x="10" y="20" font-family="Arial" font-size="14">Hello World</text>
  </defs>
  <use xlink:href="#reusableText" x="0" y="0"/>
  <use xlink:href="#reusableText" x="0" y="40"/>
</svg>

3. 使用 JavaScript 动态生成 SVG 内容

你可以使用 JavaScript 动态生成 SVG 内容，并根据参数来设置文本内容。

<svg id="mySvg" width="200" height="100"></svg>

<script>
  const svgNS = "http://www.w3.org/2000/svg";
  const svg = document.getElementById('mySvg');

  function createText(x, y, text) {
    const textElement = document.createElementNS(svgNS, 'text');
    textElement.setAttribute('x', x);
    textElement.setAttribute('y', y);
    textElement.setAttribute('font-family', 'Arial');
    textElement.setAttribute('font-size', '14');
    textElement.textContent = text;
    svg.appendChild(textElement);
  }

  createText(10, 20, 'Hello');
  createText(10, 40, 'World');
</script>

4. 使用 CSS 变量

你可以使用 CSS 变量来参数化文本内容，并通过 JavaScript 动态修改这些变量。

<svg width="200" height="100">
  <style>
    .param-text {
      font-family: Arial;
      font-size: 14px;
    }
  </style>
  <text class="param-text" x="10" y="20" style="--text-content: 'Hello';">
    <tspan>{{textContent}}</tspan>
  </text>
  <text class="param-text" x="10" y="40" style="--text-content: 'World';">
    <tspan>{{textContent}}</tspan>
  </text>
</svg>

<script>
  const textElements = document.querySelectorAll('.param-text');
  textElements.forEach(textElement => {
    const textContent = textElement.style.getPropertyValue('--text-content');
    textElement.querySelector('tspan').textContent = textContent;
  });
</script>

5. 使用 <foreignObject> 嵌入 HTML

你可以使用 <foreignObject> 元素在 SVG 中嵌入 HTML 内容，从而利用 HTML 的强大功能来实现参数化复用。

<svg width="200" height="100">
  <foreignObject x="10" y="10" width="180" height="80">
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: Arial; font-size: 14px;">
      <span id="param1">Hello</span>
      <span id="param2">World</span>
    </div>
  </foreignObject>
</svg>

你可以通过 JavaScript 动态修改 <span> 的内容来实现参数化复用。

document.getElementById('param1').textContent = 'Hi';
document.getElementById('param2').textContent = 'Universe';

总结

以上方法都可以在 SVG 动画中实现文本内容的参数化复用。选择哪种方法取决于你的具体需求和场景。如果你需要更复杂的交互和动态内容，使用 JavaScript 动态生成 SVG 内容可能是最灵活的选择。如果你只需要简单的文本复用，使用 <tspan> 或 <use> 元素可能更为方便。