SVG 动画：介绍

Source: Dev.to

有多种方式可以让你的 SVG 动画化：

• SVG/SMIL
• CSS 动画
• JavaScript

SVG/SMIL

SMIL 代表 Synchronized Multimedia Integration Language（同步多媒体集成语言），是一种基于 XML 的语言，允许你直接在 SVG 元素内部为各种属性添加动画。一个优势是，即使通过 <img> 嵌入 SVG，动画仍会被保留。

有些讨论认为 SMIL 已经过时，但根据 caniuse SVG SMIL 仍然在主流浏览器中得到完整支持。

SMIL 定义了多个可直接在 SVG 元素内部使用的动画元素，如 animate、set、animatemotion、animatecolor 等，能够实现形状变化和其他效果。

关于使用 SVG/SMIL 的详细指南，请参阅 CSS‑Tricks 上的文章 “A Guide to SVG Animations with SMIL”。

CSS

当动画比较简单且依赖于表现属性、transform 属性或其他 CSS 属性时，使用 CSS 来动画化 SVG 更为合适。更多细节请参阅关于 presentation attributes 的讨论。

JavaScript

JavaScript 可以操作 DOM 元素，使其成为 SVG 动画的强大工具。特别是 animate 方法，可用于创建复杂的脚本驱动动画。