SVG动画用SMIL通过等4个核心标签实现，无需JS或CSS；支持现代浏览器，IE已淘汰；关键属性包括attributeName、from/to、dur、repeatCount、fill和begin。
SVG动画用SMIL做，核心就是往SVG元素里加
SMIL动画的4个基础标签
所有SMIL动画都靠这四个自闭合标签实现，直接嵌在目标SVG元素内部或作为子元素使用：
-
：延迟修改单个属性值，无过渡效果。比如2秒后把圆的 cy从92.8变成105.7； -
：最常用，对一个数值型属性做平滑过渡（如 x、fill、opacity）； -
：专用于 transform类动画，比如旋转rotate、缩放scale、平移translate； -
：让元素沿路径移动，这是CSS目前难以替代的能力。
关键属性怎么填
以
-
attributeName：要动的属性名，如
"cx"、"fill"、"r"； -
from 和 to：起始值和结束值，比如
from="0"to="100"； -
dur：持续时间，单位是
s或ms，如"1.5s"； -
repeatCount：重复次数，
"indefinite"表示无限循环； -
fill：动画结束后是否保持最终状态，常用
"freeze"； -
begin：可选，指定延迟启动，如
"0.5s"或"click"触发。
动手写一个旋转方块
下面这段代码能让一个橙色方块绕中心匀速旋转360°，循环不停：
svg width="200" height="200" viewBox="0 0 200 200">from="0"
to="360"
dur="2s"
repeatCount="indefinite"
fill="freeze"/>
小技巧与避坑提醒
- 动画目标必须是SVG原生属性（如
cx、stroke-width），不能直接动CSS类名； -
attributeType已废弃，不用写，浏览器默认按XML处理； - 多个
- 想让动画更顺滑，优先用
linear缓动，避免ease带来的额外计算； - 复杂路径动画建议先用
基本上就这些。写熟了几个标签和属性，SVG自己就能跑起来，轻量又可靠。
