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