SVG 的 是自闭合标签，须嵌入目标元素内，通过 attributeName、values、dur、repeatCount 等属性控制数值型属性的声明式动画，仅支持可动画的数值属性，复杂动画需用 或 CSS/GSAP。
SVG 的 标签本身不闭合，不能写成 ...，它是一个自闭合标签，正确写法是 。 它通过属性控制 SVG 元素某个数值型属性随时间变化，实现简单但有效的声明式动画，无需 JavaScript。
动画必须挂载在目标元素内部
把 写在要动的元素（如
- ✅ 正确：
- ❌ 错误：
单独放在顶层，没指定作用对象
关键属性决定动画行为
靠几个核心属性定义“动什么、怎么动、动多久”：
-
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 交互， 就力不从心了：
- 多个变换用
（专门处理tran）
sform
- 现代项目推荐 CSS 动画（对
transform和opacity硬件加速友好）或 GSAP 等库 - 但纯 SVG 内联、无 JS 依赖的轻量场景，
依然简洁可靠
基本上就这些。写对位置、选对属性、设好值和时长，动画就跑起来了。
