JavaScript 是我们将在 SVG 动画中介绍的最后一种方式。我们已经介绍了 CSS，它很棒而且相当舒适，但它无法对您可能想要动画的许多 SVG 属性起作用。然后我们研究了 SMIL，它是一种声明性语法，直接位于 SVG 代码本身，它功能更强大，因为它可以动画化更多内容，包括元素本身的形状。
JavaScript 可以做到上面两种方式都能做到的事情，而且做得很好。它唯一的代价是您要么自己编写非常复杂的代码，要么为帮助您而使用库的开销。但是一旦您开始运行，语法就会非常棒，非常适合动画，并且性能实际上可以达到顶峰。
使用 JavaScript 进行 SVG 动画的另一个优势是支持。在对 SVG 进行动画处理时，需要注意许多怪癖。某些浏览器不支持元素的转换。某些浏览器在页面缩放时会执行奇怪的操作。某些浏览器在 transform-origin 上不一致。JavaScript 库通常可以帮助解决这些问题。
虽然我们正在专门讨论动画，但许多 JavaScript SVG 库都是关于一般处理 SVG 的。它们可以创建和操作 SVG，从元素中访问属性，更改它们等等。有点像为 SVG 添加一个更强大的 API。
Snag.svg – “SVG 的 jQuery”
使用 Snap.svg 的基本示例
在这个视频中，我们使用 Snap.svg 做的另一件事是将这个 CSS 动画 Pen 转换为 Snap.svg，这教会我们可以使用 Snap.svg 来处理页面上已经存在的内联 SVG。Adobe 自己也收集了 一些示例。
Raphael – 与 Snap.svg 来自同一创建者的较旧库
SVG.js – “用于操作和动画 SVG 的轻量级库”。这是我们查看的时钟演示 (离线)，展示了这些动画如何通过快速操作 DOM 来工作。
D3.js – “D3.js 是一个基于数据的 JavaScript 库，用于操作文档。D3 帮助您使用 HTML、SVG 和 CSS 将数据变为现实。” 这是一个入门教程，介绍如何使用它创建 SVG 以及另一个 介绍如何使用它进行动画处理。
GreenSock – “面向现代 Web 的超高性能、专业级动画。” GreenSock 主要是关于 Web 上的动画，但它也支持 SVG。 这是一个 Pen，您可以从中了解它的工作原理。
Velocity.js – “加速 JavaScript 动画。” 也是一个关于 Web 上的动画的库，它也支持 SVG。Julian Shapiro 创建了它，并写了一些关于为什么 JavaScript 动画实际上可能是 性能最高的 动画风格以及 Velocity.js 的工作原理。 这是一个非常简单的演示，对一些特定于 SVG 的属性进行动画处理。
您也可以自由地使用 JavaScript 动画，而无需框架的帮助。请记住，内联 SVG 位于 DOM 中，因此所有常规 DOM API 东西都可供您使用。有点像您不需要 jQuery 就能操作 DOM，它只是通常让它变得更容易。 这是一个示例，它以一种非常有趣的方式自行执行。