5月27日 15:44

SVG 动画有哪些实现方式？它们之间有什么区别？

前端开发中，SVG 动画主要有三种实现方式：SMIL 动画、CSS 动画和 JavaScript 动画。三种方式各有适用场景，理解它们的差异是选择技术方案的关键。

SMIL 动画（原生 SVG 动画）

SMIL（Synchronized Multimedia Integration Language）是 SVG 规范内建的动画语法，直接在 SVG 标签中声明动画行为，无需额外引入 CSS 或 JavaScript。

核心元素

<animate>：对数值型属性做插值动画，如 cx、r、opacity
<animateTransform>：控制 transform 变换（平移、旋转、缩放、倾斜）
<animateMotion>：让元素沿指定路径运动
<set>：对非数值属性做瞬时切换，如 visibility

代码示例

svg
<svg width="200" height="200">
  <circle cx="50" cy="50" r="20" fill="red">
    <animate attributeName="cx" from="50" to="150"
             dur="2s" repeatCount="indefinite" />
    <animate attributeName="fill"
             values="red;blue;red" dur="2s"
             repeatCount="indefinite" />
  </circle>
</svg>

优势

声明式语法，动画定义与 SVG 结构一体化，代码自包含
不依赖 CSS 或 JavaScript，即使脚本被禁用也能运行
可用于 <img> 标签或 CSS 背景图场景
支持动画链和同步控制（begin 属性可以引用其他动画的结束事件）

劣势

Chrome 曾宣布弃用 SMIL（后撤回弃用计划，但兼容性风险仍在）
交互能力有限，无法根据用户输入动态改变动画参数
调试工具支持较弱，DevTools 对 SMIL 的可视化编辑不如 CSS 动画友好
Safari 对部分 SMIL 特性的支持存在差异

CSS 动画

通过 CSS 的 @keyframes、animation 和 transition 属性驱动 SVG 元素动画，是日常开发中使用最广泛的方式。

代码示例

svg
<svg width="200" height="200">
  <style>
    .circle {
      animation: move 2s infinite alternate;
    }
    .circle:hover {
      fill: blue;
      transition: fill 0.3s;
    }
    @keyframes move {
      from { transform: translateX(0); }
      to { transform: translateX(100px); }
    }
  </style>
  <circle class="circle" cx="50" cy="50" r="20" fill="red" />
</svg>

优势

浏览器兼容性最好，标准成熟稳定
transform 和 opacity 动画可触发 GPU 合成层，性能优异
DevTools 支持完善，可实时调试和调整动画参数
天然支持 :hover、:focus 等伪类交互
样式与结构分离，便于复用和维护

劣势

只能动画 CSS 可识别的属性，SVG 独有属性（如 d、cx、points）在部分浏览器中不支持 CSS 动画
Safari 不支持通过 CSS 动画化 <path> 的 d 属性，形状变形动画受限
复杂序列动画需要大量 @keyframes 和时间计算，代码可读性下降
无法实现条件逻辑或基于用户输入的动态控制

CSS 动画化 SVG 属性的兼容性现状

属性	Chrome	Firefox	Safari
`transform`	支持	支持	支持
`opacity`	支持	支持	支持
`cx` / `cy` / `r`	支持	支持	部分支持
`d`（路径变形）	支持	支持	不支持
`fill` / `stroke`	支持	支持	支持

JavaScript 动画

通过 JavaScript 直接操作 SVG DOM，或借助动画库实现复杂效果。灵活性最高，适合交互密集的场景。

原生 JavaScript 示例

javascript
const circle = document.querySelector('circle');
let position = 50;

function animate() {
  position += 1;
  circle.setAttribute('cx', position);
  if (position < 150) {
    requestAnimationFrame(animate);
  }
}
animate();

GSAP 示例

javascript
gsap.to('circle', {
  attr: { cx: 150 },
  duration: 2,
  repeat: -1,
  yoyo: true
});

优势

完全控制动画的每一个细节，可动画任何 SVG 属性
可根据用户输入、滚动位置、数据变化等动态调整动画
动画库（GSAP、Anime.js、Motion One）提供缓动函数、时间轴、交错动画等高级能力
可与业务逻辑深度集成，实现数据驱动的可视化动画

劣势

代码量较大，维护成本高于声明式方案
性能依赖实现质量，低效的 DOM 操作会导致卡顿
依赖 JavaScript 运行环境，脚本被禁用时动画失效
增加第三方库会增加打包体积

Web Animations API

浏览器原生提供的 element.animate() 方法，兼具 CSS 动画的性能和 JavaScript 的灵活性：

javascript
const circle = document.querySelector('circle');
circle.animate(
  [
    { transform: 'translateX(0)' },
    { transform: 'translateX(100px)' }
  ],
  { duration: 2000, iterations: Infinity, direction: 'alternate' }
);

Web Animations API 可以在不引入第三方库的情况下获得接近 CSS 的性能，同时保留 JavaScript 的动态控制能力。但浏览器兼容性（特别是 Safari）需要注意。

三种方式核心对比

维度	SMIL	CSS	JavaScript
学习成本	中	低	高
灵活性	低	中	高
性能	好	最好	取决于实现
交互能力	弱	中	强
浏览器兼容	有风险	最好	好
可调试性	弱	强	中
适用场景	独立 SVG 文件	简单动画、UI反馈	复杂交互、数据驱动

如何选择

简单属性动画和 UI 反馈（按钮缩放、图标旋转、淡入淡出）：优先 CSS 动画，性能最优、代码最少
独立 SVG 文件中的自包含动画（图标、加载动画）：SMIL 仍可用，但需评估兼容性风险
复杂交互和数据驱动动画（图表、游戏、滚动动画）：JavaScript + 动画库，GSAP 是目前最成熟的选择
需要兼顾性能和动态控制：Web Animations API 是折中方案，但要做好兼容性降级

实际项目中，三种方式并非互斥。常见做法是用 CSS 处理简单过渡，用 JavaScript 库处理复杂序列，必要时在独立 SVG 中使用 SMIL。关键是根据动画复杂度、交互需求和兼容性要求做出权衡。

标签：SVG