SVG文本如何复用并动态改变其内容？

在SVG中，你可以通过使用 <defs> 和 <use> 元素来复用文本，并通过JavaScript动态改变其内容。以下是一个简单的示例，展示了如何实现这一点：

1. 定义可复用的文本

首先，在 <defs> 元素中定义一个文本元素，并为其指定一个唯一的 id。

<svg width="500" height="200">
  <defs>
    <text id="reusableText" x="10" y="20" font-family="Arial" font-size="16" fill="black">Default Text</text>
  </defs>
</svg>

2. 复用文本

使用 <use> 元素来复用定义的文本。你可以通过 xlink:href 属性引用之前定义的文本。

<svg width="500" height="200">
  <defs>
    <text id="reusableText" x="10" y="20" font-family="Arial" font-size="16" fill="black">Default Text</text>
  </defs>

  <use xlink:href="#reusableText" x="50" y="50" />
</svg>

3. 动态改变文本内容

通过JavaScript，你可以动态改变文本内容。首先，给 <use> 元素一个 id，然后使用JavaScript来修改文本内容。

<svg width="500" height="200">
  <defs>
    <text id="reusableText" x="10" y="20" font-family="Arial" font-size="16" fill="black">Default Text</text>
  </defs>

  <use id="usedText" xlink:href="#reusableText" x="50" y="50" />
</svg>

<script>
  // 获取<use>元素
  const usedText = document.getElementById('usedText');

  // 获取<text>元素的引用
  const reusableText = document.getElementById('reusableText');

  // 动态改变文本内容
  reusableText.textContent = 'New Text Content';
</script>

4. 动态改变多个复用的文本

如果你有多个复用的文本实例，并且想要分别控制它们的内容，你可以为每个 <use> 元素指定不同的 id，并在JavaScript中分别处理。

<svg width="500" height="200">
  <defs>
    <text id="reusableText" x="10" y="20" font-family="Arial" font-size="16" fill="black">Default Text</text>
  </defs>

  <use id="usedText1" xlink:href="#reusableText" x="50" y="50" />
  <use id="usedText2" xlink:href="#reusableText" x="50" y="100" />
</svg>

<script>
  // 获取<use>元素
  const usedText1 = document.getElementById('usedText1');
  const usedText2 = document.getElementById('usedText2');

  // 获取<text>元素的引用
  const reusableText = document.getElementById('reusableText');

  // 动态改变第一个复用的文本内容
  reusableText.textContent = 'First Text Content';

  // 动态改变第二个复用的文本内容
  reusableText.textContent = 'Second Text Content';
</script>

注意事项

• <use> 元素复用的内容是不可见的，因此你需要通过JavaScript来修改原始 <text> 元素的内容。
• 如果你需要为每个复用的文本实例设置不同的内容，可以考虑使用多个 <text> 元素，并为每个 <text> 元素指定不同的 id。

通过这种方式，你可以在SVG中复用文本，并动态地改变其内容。