SVG动画用标签基于SMIL实现,轻量原生、无需JS;推荐嵌套在目标元素内,关键属性包括attributeName、from/to/values、dur、repeatCount、begin;复杂变换应使用;支持事件触发与JS控制;现代浏览器兼容良好,IE全系不支持。
SVG动画用 标签实现,核心是通过 SMIL(Synchronized Multimedia Integration Language)在 SVG 元素内部定义属性随时间变化的行为。它轻量、原生支持、无需 JS 就能驱动动画,适合图标动效、数据可视化过渡等场景。
animate 标签必须写在目标元素内部或同级
不能单独存在,必须作为 SVG 元素的子元素(推荐),或与目标元素同级并用 href 指向它(需注意浏览器兼容性)。最稳妥写法是直接嵌套:
上面例子让圆的半径从 20 动画到 40,循环播放。关键属性说明:
-
attributeName:指定要动画的 SVG 属性名,如
cx、fill、opacity、transform(注意:transform需配合attributeType="XML"或改用) -
from / to / values:定义起始值、结束值或关键帧序列(
values="20;30;40;30;20") -
dur:动画持续时间,单位可为
s或ms -
repeatCount:重复次数,
indefinite表示无限循环 -
begin:动画开始时机,支持
0s、click、button1.click、an1.end(依赖其他动画)等
位移、旋转、缩放建议用 animateTransform
直接对 transform 属性做 容易出错(尤其多变换叠加时)。推荐使用专用标签 :
type 可选 translate、scale、rotate、skewX/skewY;from 和 to 格式按 type 变化,例如 rotate 是 角度 cx cy,translate 是 x y。