什么是SMIL
SMIL全称为Synchronized Multimedia Integration Language，是SVG规范中原生支持的动画描述语言，开发者可以直接在SVG标签内部编写动画逻辑，不需要引入任何第三方库，就能让SVG元素产生动态变化效果。它支持对SVG元素的属性、样式、变换等多种维度进行动画控制，兼容性覆盖大部分现代浏览器。
SMIL核心动画元素
animate元素
animate是最基础的动画元素，用于改变SVG元素的某个具体属性值，比如宽度、高度、颜色等。我们可以通过设置属性来控制动画的起始值、结束值、持续时间和重复次数。
下面是一个让矩形宽度从50px变化到200px的动画示例：
<svg width="300" height="100">
<rect x="10" y="20" height="60" fill="#4CAF50">
<animate
attributeName="width"
from="50"
to="200"
dur="2s"
repeatCount="indefinite"
/>
</rect>
</svg>
上述代码中，attributeName指定要动画的属性，from和to分别是起始和结束值，dur是动画持续时间，repeatCount设置为indefinite表示无限重复播放。
animateTransform元素
animateTransform专门用于实现SVG元素的变换动画，比如旋转、缩放、平移、倾斜等，它的type属性用来指定变换的类型。
下面是一个让圆形持续旋转的示例：
<svg width="200" height="200">
<circle cx="100" cy="100" r="40" fill="#2196F3">
<animateTransform
attributeName="transform"
type="rotate"
from="0 100 100"
to="360 100 100"
dur="3s"
repeatCount="indefinite"
/>
</circle>
</svg>
这里的from和to值格式为角度 旋转中心x 旋转中心y，表示围绕坐标(100,100)从0度旋转到360度。
animateMotion元素
animateMotion可以让SVG元素沿着指定的路径运动，不需要手动计算每一帧的位置，只需要定义好运动路径即可。
下面是一个让三角形沿着椭圆路径运动的示例：
<svg width="400" height="200">
<path id="motionPath" d="M50,100 A150,80 0 1,1 350,100" fill="none" stroke="#ccc" stroke-width="2"/>
<polygon points="0,-10 10,10 -10,10" fill="#FF9800">
<animateMotion
dur="4s"
repeatCount="indefinite"
rotate="auto"
>
<mpath href="#motionPath"/>
</animateMotion>
</polygon>
</svg>
mpath元素用来关联之前定义的运动路径，rotate="auto"表示元素会跟随路径的切线方向自动调整角度。
SMIL常用属性说明
除了各个动画元素特有的属性外，SMIL还有一些通用的控制属性，下面是常见属性的说明：
| 属性名 | 作用说明 |
|---|---|
| begin | 动画开始的时间，支持设置具体秒数，也可以设置为其他动画的结束事件触发 |
| dur | 动画的持续时间，格式为数字加s（秒）或ms（毫秒） |
| repeatCount | 动画重复次数，设置为indefinite表示无限重复 |
| fill | 动画结束后的状态，freeze表示保持结束状态，remove表示回到初始状态 |
| calcMode | 动画插值模式，linear为线性插值，discrete为离散插值，paced为匀速插值 |
SMIL动画注意事项
- 虽然SMIL是SVG原生规范，但部分浏览器已经不再支持，实际使用前建议先确认目标浏览器的兼容性情况
- 动画元素必须作为需要动画的SVG子元素存在，不能单独放在SVG根节点下
- 如果需要对多个属性做动画，可以给同一个SVG元素添加多个不同的动画子元素
- 复杂的交互动画场景，SMIL的能力有限，此时可以结合JavaScript或者CSS动画实现
SVG动画SMILSVG_animationSMIL_tutorial修改时间：2026-07-22 23:21:29