svg动画 html,SVG 路径动画简易指南_SVG, SVG Animation, Animation, Web动画 教程_W3cplus

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！SVG(可缩放的矢量图形)完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

在过去的几个月里，我一直在做一个大量使用了 SVG 及其动画效果的项目。在本文中，我将介绍如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验。

可缩放矢量图形

SVG 是一种基于 XML 文档的图片格式，所以大部分情况其特性表现类似于 HTML。它为许多常见的几何图形定义了不同的元素，通过组合这些不同的形状元素可以生成 SVG 二维图形。SVG 规范是由万维网联盟(W3C)于1999制定的标准，所有的主流浏览器目前均支持了 SVG 的渲染。由于 SVG 图形是 XML 文档，因此 Web 浏览器提供的 DOM 相关的 API，同样可作用于与 SVG 图形的交互。

SVG 路径

如果要说出 SVG 中最强大的元素，毫无疑问是 (路径元素)。

路径元素是一个可以构建出你所能想象的几乎任何高级的2D图形的基本形状。路径元素通过一系列绘图命令来生效，它非常类似于1967年的 Logo 编程语言，不同的是它只是更现代化的