【HTML】制作一个简单的动态SVG图形
以下是一个简单的HTML页面示例，其中包含了一个动态SVG图形，这个图形会随时间改变颜色。
<!DOCTYPE html>
<html>
<head>
<title>动态SVG示例</title>
<script>
function changeColor() {
var circle = document.getElementById('myCircle');
var currentColor = circle.getAttribute('fill');
var newColor = currentColor === 'red' ? 'blue' : 'red';
circle.setAttribute('fill', newColor);
}
setInterval(changeColor, 1000); // 每隔1000毫秒调用一次changeColor函数
</script>
</head>
<body>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="50" cy="50" r="40" fill="red" />
</svg>
</body>
</html>这段代码中，我们定义了一个名为changeColor的函数，该函数会获取SVG中id为myCircle的圆形的当前颜色，然后将其切换为红色或蓝色。通过使用setInterval函数，我们每隔1000毫秒就会自动调用changeColor函数，从而实现颜色的动态变换。
评论已关闭