创建模块化 SVG 动画的最佳方式

创建模块化的SVG动画最佳方式是使用JavaScript和CSS来控制SVG元素的动态变化。下面是一个示例解决方法：

1. 创建一个SVG元素和一个外部的CSS文件：

<svg id="my-svg" width="200" height="200">
  <circle id="my-circle" cx="100" cy="100" r="50" />
</svg>

#my-circle {
  fill: blue;
  transition: fill 1s;
}

2. 在JavaScript文件中导入SVG元素并添加事件监听器：

import { TweenMax } from "gsap";

const circle = document.getElementById("my-circle");

circle.addEventListener("mouseenter", () => {
  TweenMax.to(circle, 0.5, { attr: { fill: "red" } });
});

circle.addEventListener("mouseleave", () => {
  TweenMax.to(circle, 0.5, { attr: { fill: "blue" } });
});

在这个示例中，我们使用了GSAP库来实现SVG元素的动画效果。当鼠标进入圆圈时，圆圈的填充颜色会从蓝色变为红色；当鼠标离开时，填充颜色会恢复为蓝色。通过添加事件监听器，我们可以在不同的事件触发时实现不同的动画效果。

注意：这只是一个简单的示例，你可以根据自己的需求进行更复杂的SVG动画设计。