SVG动画中如何动态传递文本参数？

在SVG动画中，动态传递文本参数可以通过以下几种方式实现：

1. 使用JavaScript动态修改SVG文本

你可以使用JavaScript来动态修改SVG中的文本内容。首先，给SVG中的文本元素设置一个唯一的ID，然后通过JavaScript获取该元素并修改其内容。

<svg width="200" height="100">
  <text id="dynamicText" x="10" y="50" font-size="20">Initial Text</text>
</svg>

<script>
  // 获取SVG文本元素
  var textElement = document.getElementById('dynamicText');

  // 动态修改文本内容
  textElement.textContent = 'New Text';
</script>

2. 使用<animate>元素

SVG的<animate>元素可以用来动态改变文本内容。你可以通过<animate>元素的attributeName属性来指定要改变的属性（如textContent），并通过values属性传递不同的文本值。

<svg width="200" height="100">
  <text x="10" y="50" font-size="20">
    <animate attributeName="textContent" values="First Text;Second Text;Third Text" dur="5s" repeatCount="indefinite" />
  </text>
</svg>

3. 使用<set>元素

<set>元素可以用来在特定时间点设置文本内容。你可以通过to属性指定要设置的文本值。

<svg width="200" height="100">
  <text x="10" y="50" font-size="20">
    <set attributeName="textContent" to="New Text" begin="2s" />
  </text>
</svg>

4. 使用SMIL动画

SMIL（Synchronized Multimedia Integration Language）是SVG中的一种动画技术。你可以使用<animate>或<set>元素来实现文本的动态变化。

<svg width="200" height="100">
  <text x="10" y="50" font-size="20">
    <animate attributeName="textContent" from="Start Text" to="End Text" dur="3s" repeatCount="indefinite" />
  </text>
</svg>

5. 结合JavaScript和CSS

你还可以结合JavaScript和CSS来动态改变SVG文本的样式和内容。例如，通过JavaScript动态添加CSS类来改变文本的显示效果。

<svg width="200" height="100">
  <text id="dynamicText" x="10" y="50" font-size="20">Initial Text</text>
</svg>

<style>
  .highlight {
    fill: red;
    font-weight: bold;
  }
</style>

<script>
  var textElement = document.getElementById('dynamicText');
  textElement.textContent = 'Highlighted Text';
  textElement.classList.add('highlight');
</script>

6. 使用外部数据源

如果你需要从外部数据源（如API）获取文本内容，可以使用JavaScript的fetch或XMLHttpRequest来获取数据，然后动态更新SVG文本。

<svg width="200" height="100">
  <text id="dynamicText" x="10" y="50" font-size="20">Loading...</text>
</svg>

<script>
  fetch('https://api.example.com/text')
    .then(response => response.text())
    .then(data => {
      document.getElementById('dynamicText').textContent = data;
    })
    .catch(error => {
      console.error('Error fetching text:', error);
    });
</script>

总结

在SVG动画中动态传递文本参数可以通过多种方式实现，包括使用JavaScript、<animate>、<set>元素、SMIL动画以及结合外部数据源。选择哪种方式取决于你的具体需求和场景。