在SVG动画中动态修改文本内容可以通过JavaScript来实现。SVG（可缩放矢量图形）是一种基于XML的图像格式，允许你使用JavaScript来操作和修改其内容。以下是一个简单的示例，展示了如何在SVG中动态修改文本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Text Animation</title>
</head>
<body>
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<text id="dynamicText" x="10" y="50" font-family="Arial" font-size="24" fill="black">Hello</text>
</svg>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
// 获取SVG中的文本元素
var textElement = document.getElementById('dynamicText');
// 修改文本内容
textElement.textContent = "World!";
}
</script>
</body>
</html>
SVG文本元素：在SVG中，<text>元素用于定义文本。在这个示例中，我们创建了一个<text>元素，并给它一个id为dynamicText，初始文本内容为"Hello"。
JavaScript函数：changeText()函数用于修改SVG文本内容。通过document.getElementById('dynamicText')获取SVG中的文本元素，然后使用textContent属性来修改文本内容。
按钮触发：在HTML中，我们创建了一个按钮，当用户点击按钮时，调用changeText()函数，从而动态修改SVG中的文本内容。
你可以结合CSS动画或JavaScript动画库（如GSAP）来创建更复杂的SVG文本动画效果。例如，可以在修改文本内容的同时，添加渐变、缩放、旋转等动画效果。
function changeTextWithAnimation() {
var textElement = document.getElementById('dynamicText');
// 添加动画效果
textElement.style.transition = "opacity 0.5s";
textElement.style.opacity = 0;
setTimeout(function() {
textElement.textContent = "World!";
textElement.style.opacity = 1;
}, 500); // 500ms后修改文本并恢复透明度
}
在这个扩展示例中，文本内容在修改之前会先淡出，然后在修改后淡入，从而创建一个平滑的过渡效果。
通过这种方式，你可以在SVG动画中灵活地动态修改文本内容，并添加各种视觉效果。