SVG 动画不需要 CSS 或 JavaScript

SVG（可缩放矢量图形）是一种多功能工具，可让我们用可缩放的矢量形状（如线和圆）创建图形。最棒的是什么？这些图形可以缩小到无限小，而不会损失任何分辨率！等等，还有更多–我们甚至可以为 SVG 添加动画，而无需使用 CSS。这意味着我们的图形将栩栩如生，以全新的方式吸引观众的注意力。无论是创建简单的徽标还是复杂的信息图形，SVG 都是一个强大的工具，可以帮助您将视觉创意变为现实。

用 SVG 绘制 3 个圆形的按钮

动画

您知道 SVG 有动画元素吗？有了它，我们就可以让网站或应用程序上的事物随着时间的推移而移动或变化。请看下面的示例，我将一个浅红色圆圈的中心 x 位置（cx）从 61 变为 50，然后再变回 61。这个动画将一直重复下去！

点击时触发

最后，让我们只在点击时触发动画。下面的示例是用 VUE 制作的，如果想看一个纯 JavaScript 示例，请参阅 stackoverflow 示例。

当我们将一个动画元素的 repeatCount 改为 1 并开始为不确定时，它就会完全停止。然后，我们添加一个函数，通过点击事件再次启动动画。在该函数中，我们通过引用（VUE.js）或 ID（原生 JS）获取动画元素，然后调用 beginElement 方法启动一次动画。

结论

SVG 格式的动画可以给人留下深刻印象，而且无需 CSS 或 JavaScript 等额外编码即可轻松使用。这意味着创建可缩放的矢量动画通常不需要依赖这些工具。