23: 使用 SMIL 为 SVG 添加动画

尽管使用 CSS 为 SVG 添加动画对于普通的前端开发者来说可能更舒适，但 SVG 本身还内置了另一种动画方式，直接嵌入在 SVG 语法中。本视频简要介绍了这一点，但如果您想获得完整的参考指南，请务必查看 CSS-Tricks 上 Sara Soueidan 撰写的 SVG 动画指南 (SMIL)。

SMIL 代表同步多媒体集成语言。据我了解，它本身就是一个“东西”，恰好被内置到 SVG 中。但 SVG 也有一些自己的类似 SMIL 的扩展。我将统称为 SMIL，尽管我确信在某些情况下我的说法在技术上是不正确的。

对于非常简单的动画，使用 SMIL 或 CSS 并没有太大区别，它们的效果和难度级别都差不多。某些方面 CSS 甚至可能更简单。但以下是一些 SMIL 更适合使用的场景：

• 你需要动画化 CSS 无法触及的内容。例如多边形或路径的形状。
• 你希望使用事件来影响动画，例如 click 或 mouseover 等。
• 你希望进行累加动画，例如，从当前位置再动画 x 像素。
• 你希望动画之间存在直接关联，例如，当此动画结束后立即启动下一个动画（无需手动操作持续时间）。
• 我相信还有更多。

语法一开始看起来可能很吓人，但我保证其实很简单。以下是一个基本示例：

<svg>
  
  <rect x="5" y="5" width="50" height="50">
    
    <animate attributeName="width" to="75" dur="2s"></animate>
    
    <animate attributeName="y" to="25" dur="2s"></animate>
    
    <animate attributeName="fill" to="red" dur="2s"></animate>
    
  </rect>
  
</svg>

查看 Chris Coyier 在 CodePen 上的笔 jAipI（@chriscoyier）。

“形状变形”功能在 SMIL 中非常独特，因此这里有一个比我们在视频中演示的 奇怪的示例 更好的示例：

查看 Chris Coyier 在 CodePen 上的笔 形状变形按钮（@chriscoyier）。

在该演示中，事件由 JavaScript 而不是 SMIL 处理。只是让你知道你也可以这样做。SMIL 事件触发器很酷，但需要点击的对象必须在该 SVG 中，而不能是 DOM 中的任何其他位置。