在SVG中，动态改变文本内容可以通过JavaScript来实现。你可以使用<text>元素来定义文本，并通过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 <text> 元素:
<text> 元素用于在SVG中定义文本。x 和 y 属性定义了文本的起始位置。font-family 和 font-size 属性定义了文本的字体和大小。fill 属性定义了文本的颜色。JavaScript 函数:
changeText() 函数通过 document.getElementById() 获取SVG中的 <text> 元素。textContent 属性来动态改变文本内容。按钮:
changeText() 函数，从而改变SVG文本内容。你可以通过以下方式进一步扩展这个示例：
setInterval() 或 setTimeout() 来定时改变文本内容。<script>
var texts = ["Hello", "World", "SVG", "Animation"];
var index = 0;
function changeText() {
var textElement = document.getElementById('dynamicText');
textElement.textContent = texts[index];
index = (index + 1) % texts.length;
}
setInterval(changeText, 1000); // 每1秒改变一次文本
</script>
在这个扩展示例中，文本内容会每隔1秒自动切换一次。
通过这些方法，你可以轻松地在SVG中实现动态文本内容的改变。