首先通过JavaScript操作SVG实现动态效果，如改变圆形颜色和大小；接着利用requestAnimationFrame实现平滑动画，使圆形周期性缩放；最后添加鼠标事件实现交互，点击后启动或暂停动画，提升用户体验。
在现代网页开发中，SVG（可缩放矢量图形）因其清晰、轻量和响应式特性，被广泛用于图标、图表和动态视觉效果。结合 JavaScript，SVG 不仅能实现流畅的动画，还能支持丰富的用户交互。下面介绍如何使用 JavaScript 创建 SVG 动画并添加交互功能。
1. 基础 SVG 结构与 JavaScript 控制
SVG 是基于 XML 的标记语言，可以直接嵌入 HTML 中。通过 JavaScript 操作其属性，可以实现动态变化。
例如，创建一个简单的圆形：
使用 JavaScript 改变圆的颜色或位置：
const circle = document.getElementById("myCircle");
circle.setAttribute("fill", "red");
circle.setAttribute("r", 60);
2. 实现基本动画效果
JavaScript 可以通过定时器或 requestAnimationFrame 实现平滑动画。
比如让圆逐渐放大再缩小：
let growing = true;
let radius = 40;
function animate() {
const circle = document.getElementById("myCircle");
if (growing) {
radius += 0.5;
} else {
radius -= 0.5;
}
if (radius >= 60) growing = false;
if (radius <= 40) growing = true;
circle.setAttribute("r", radius);
requestAnimationFrame(animate);
}
animate();
radius += 0.5;
} else {
radius -= 0.5;
}
if (radius >= 60) growing = false;
if (radius <= 40) growing = true;
circle.setAttribute("r", radius);
requestAnimationFrame(animate);
}
animate();
3. 添加用户交互事件
SVG 元素支持标准 DOM 事件，如 click、mouseover、mouseout 等。
示例：点击圆切换颜色，鼠标悬停时放大：
const circle = document.getElementById("myCircle");
circle.addEventListener("click", function () {
const currentColor = this.getAttribute("fill");
this.setAttribute("fill", currentColor === "blue" ? "green" : "blue");
});
circle.addEventListener("mouseover", function () {
this.setAttribute("r", 50);
});
circle.addEventListener("mouseout", function () {
this.setAttribute("r", 40);
});
4. 使用 CSS 配合 JS 提升动画表现
虽然可以用 JS 直接修改属性，但对某些动画（如颜色、透明度），使用 CSS transition 更高效。
先定义样式：
JS 中只需修改类名或属性，浏览器自动处理过渡动画：
circle.classList.add("highlight"); // 触发预定义的动画类
基本上就这些。通过 JavaScript 控制 SVG 属性，配合事件监听和动画循环，你可以创建出既美观又可交互的矢量图形效果。关键在于理解 SVG 的 DOM 结构，并合理利用 JS 和 CSS 的协作。不复杂但容易忽略细节。
