SVG 的 是自闭合标签，须嵌入目标元素内，通过 attributeName、values、dur、repeatCount 等属性控制数值型属性的声明式动画，仅支持可动画的数值属性，复杂动画需用 或 CSS/GSAP。
SVG 的
动画必须挂载在目标元素内部
把
- ✅ 正确：
- ❌ 错误：
顶层，没指定作用对象
关键属性决定动画行为
靠几个核心属性定义“动什么、怎么动、动多久”：
-
attributeName：指定要改变的属性名，比如
"cx"、"fill"、"opacity"（注意大小写和拼写必须完全匹配） -
values：用分号隔开的值列表，例如
"0;100;0"表示从 0 → 100 → 0；也可用空格分隔（但分号更稳妥） -
dur：单次动画时长，如
"1.5s"或"300ms" -
repeatCount：重复次数，
"3"表示播 3 次，"indefinite"表示无限循环 -
begin（可选）：延迟开始，如
"0.5s"或"click"（点击后启动）
支持的属性类型有限制
- ✅ 支持：位置类（
cx,cy,x,y）、尺寸类（r,width,height）、颜色（fill,stroke，需写成十六进制或 rgb 字符串）、透明度（opacity） - ❌ 不支持：
class、id、transform（要用display等非数值或结构类属性
替代方案更灵活（简单动画够用，复杂建议换）
如果需要位移+旋转+缩放组合、缓动函数（ease-in-out）、或与 JS 交互，
- 多个变换用
transform） - 现代项目推荐 CSS 动画（对
transform和opacity硬件加速友好）或 GSAP 等库 - 但纯 SVG 内联、无 JS 依赖的轻量场景，
基本上就这些。写对位置、选对属性、设好值和时长，动画就跑起来了。
