17370845950

SVG 的 是自闭合标签，须嵌入目标元素内，通过 attributeName、values、dur、repeatCount 等属性控制数值型属性的声明式动画，仅支持可动画的数值属性，复杂动画需用 或 CSS/GSAP。

SVG 的 标签本身不闭合，不能写成 ...，它是一个自闭合标签，正确写法是 。 它通过属性控制 SVG 元素某个数值型属性随时间变化，实现简单但有效的声明式动画，无需 JavaScript。

动画必须挂载在目标元素内部

把 写在要动的元素（如 、）里面，它才会生效。外部写或放错位置都不会触发。

• ✅ 正确：
• ❌ 错误： 单独放在 顶层，没指定作用对象

关键属性决定动画行为

靠几个核心属性定义“动什么、怎么动、动多久”：

• attributeName：指定要改变的属性名，比如 "cx"、"fill"、"opa

  

  city"（注意大小写和拼写必须完全匹配）
• 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 依赖的轻量场景， 依然简洁可靠

基本上就这些。写对位置、选对属性、设好值和时长，动画就跑起来了。