SVG动画怎么做 SMIL入门教程

SVG动画用SMIL通过等4个核心标签实现，无需JS或CSS；支持现代浏览器，IE已淘汰；关键属性包括attributeName、from/to、dur、repeatCount、fill和begin。

SVG动画用SMIL做，核心就是往SVG元素里加<animate></animate>这类标签，不写JavaScript、不依赖CSS也能动起来。现代浏览器（Chrome/Firefox/Safari）都支持，IE已淘汰，不用顾虑兼容性问题。

SMIL动画的4个基础标签

所有SMIL动画都靠这四个自闭合标签实现，直接嵌在目标SVG元素内部或作为子元素使用：

• ：延迟修改单个属性值，无过渡效果。比如2秒后把圆的cy从92.8变成105.7；
• <animate></animate>：最常用，对一个数值型属性做平滑过渡（如x、fill、opacity）；
• ：专用于transform类动画，比如旋转rotate、缩放scale、平移translate；
• <animatemotion></animatemotion>：让元素沿路径移动，这是CSS目前难以替代的能力。

关键属性怎么填

以<animate></animate>为例，这几个属性必须配齐才有效：

标签： css javascript java js svg 浏览器 safari xml处理