任何称职的前端工程师都知道碎片化的设备生态系统带来的挑战. 不同的屏幕尺寸, 决议, 和 aspect ratios make it difficult to deliver a consistent experience. More so for those who want to deliver a pixel-perfect experience.

可缩放矢量图形(svg)帮助解决了部分问题，并且做得非常好. Although they have their limitations, SVGs can be very helpful for certain occasions 和, 如果你有一个优秀的设计团队, 你也可以在不增加浏览器不必要的负担或阻碍加载时间的情况下，创造出更令人惊叹的视觉体验.

在过去的几个月, 我一直致力于一个广泛使用SVG及其动画和效果功能的项目. 在本文中, 我将分享如何使用SVG及其动画技术为您的web前端工作带来一些新的生命.

可缩放矢量图形

SVG is an image format that is based on XML, much like how HTML works. 它为许多熟悉的几何形状定义了不同的元素，这些几何形状可以在标记中组合以生成二维图形.

的 SVG规范 is an open st和ard developed by the World Wide Web Consortium (W3C) in 1999.

All major web browsers have had SVG渲染支持 有一段时间了.

Since SVG graphics are XML documents, web浏览器提供了基于DOM节点的api，可用于与图像交互. 谈论 让图片栩栩如生!

SVG路径

If t在这里 is one overpowered 元素 in SVG, that would be the <路径> 元素.

路径元素是一个基本的形状，可以用来创建几乎任何你能想到的高级2D形状.

的 元素 works by taking a sequence of drawing comm和s. It is a lot like the Logo programming language from 1967, only modernized 和 designed for fancy graphics. 的 元素 takes 这 sequence of drawing comm和s through the attribute d.

<路径 d="M10 10 L75 10 L75 75 Z" />

You can think of a virtual pen that draws on the screen, 和 the drawing comments in the 路径 元素 merely controls the pen. In the example above, the pen is being instructed to move to position (10, 10) (M10 10)，划清界限 (75, 10) (L75 10)，划清界限 (75, 75) L75 75 和 然后 to close the 路径 by returning to the starting point (Z).

Using other drawing comm和s, such as arcs (A)、二次贝塞尔曲线(Q)、三次贝塞尔曲线(C), etc you can create much more complex shapes 和 graphics in SVG.

You can learn a lot more about the 路径 元素 在这里.

SVG路径和CSS

“好吧，胡安，我明白了. Paths are powerful, but how do I animate them?你说.

对于我们的第一项技术，我们将利用两个SVG属性: stroke-dasharray 和 stroke-dashoffset.

的 stroke-dasharray attribute controls the pattern of dashes 和 gaps used to stroke the 路径. 如果你想把你的线条画成一组破折号和空白，而不是一个连续的笔画, 这 is the attribute you would use.

SVG图像是web浏览器DOM的一部分，stroke-dasharray是一个表示元素, the attribute can also be set using CSS.

类似地, stroke-dashoffset 属性(指定在破折号模式中开始破折号的距离)也可以使用CSS来控制.

这两个SVG属性, 在一起, can be used to animate SVG 路径s, giving the viewer the illusion that the 路径s are being drawn gradually.

Take 这 quadratic bezier curve, for example:

<路径 fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="路径">

将这条路径动画化，就好像它是在屏幕上逐渐平滑地绘制的, we will have to set the dash (和 gap) lengths, using the stroke-dasharray attribute, 等于路径长度. 这是为了使虚线曲线中的每个破折号和间隙的长度等于整个路径的长度.

Next, we will set the dash offset, using the stroke-dashoffset attribute, to 0. 这将使路径在屏幕上显示为一条实曲线(我们实际上是在看第一个破折号), 和 we already made each dash span the entire length of the curve). By setting the dash offset equal to the length of the curve, 我们最终会得到一条看不见的曲线(我们现在看到的曲线被渲染成一个完整的缺口——紧跟着破折号的部分)。.

现在，通过动画stroke-dashoffset属性，您可以使曲线逐渐出现在屏幕上.

看笔 total - SVG & CSS路径 by total 博客 (@toptalblog) on CodePen.

As you can see, the curve is always t在这里. We are only changing the dash offset to make the dashed part appear 位 by 位.

你可以使用相同的原则，但要有更多的路径:

看笔 total - SVG & CSS路径 by total 博客 (@toptalblog) on CodePen.

Here you have one black curve that is fixed, a red one that is moving along the 路径, 和 another black one following the red one but 40px behind.

Stroke-dasharray和stroke-dashoffset是两个非常强大的属性，可用于向SVG路径应用大量动画和效果. 你可以试试 这 h和y tool that you can use to experiment with the two attributes.

Animating Objects Along SVG路径

使用SVG和CSS，您可以做的另一件很酷的事情是使对象或元素沿着路径移动.

T在这里 are 2 SVG attributes we are going to use for the animation:

• offset-路径: offset-路径 CSS属性指定元素定位的偏移路径.

• offset-distance: offset-distance CSS属性指定偏移路径上的位置.

通过结合这两个属性，你可以很容易地制作出这样的动画:

看笔 total - SVG & CSS路径 by total 博客 (@toptalblog) on CodePen.

As you can see, we have a new 元素 div.球.

This 元素 can be anything, a div, an image, text, whatever. 在这个例子中的想法是，通过使用offset-路径和offset-distance，你可以给元素一个路径来跟随和动画距离，元素将通过路径移动.

SVG 动画s Using JavaScript

如果所有这些还不够花哨，那么您总是可以求助于JavaScript.

Animating SVG 元素s 使用JavaScript can be much like animating DOM 元素s. 然而, 使用JavaScript, you can achieve the animation techniques we have checked out above, 但是更容易.

Previously, we had to hardcode the 路径 lengths in our CSS. With the help of the JavaScript function 路径.getTotalLength () 可以即时计算路径的长度并根据需要使用它. 你可以了解更多 在这里.

除了, 已经有许多库可供您使用，它们可以使SVG动画变得比现在简单得多.

提前.svg not only makes it easy to draw SVG images using JavaScript, it makes animating them as simple as calling .动画({}).

另一个库, 动漫.js, lets you make a div 元素 follow an SVG 路径 with just a 几行代码.

如果你正在寻找一个库，它可以自己做更多的事情，但结果仍然令人惊叹, 然后 Vivus 是你要找的吗. It takes a different, more configuration-driven approach to SVG 路径 animation. 有了这个图书馆, 您只需要向要绘制的SVG元素添加一个ID，并使用该ID定义一个Vivus对象. Vivus will take care of the rest.

进一步的阅读

以下是在处理SVG图像并将其动画化时可能会发现有用的资源列表:

To go more in depth with SVG animation, you can read 这 short article on the SVG动画的三种方法 images 和 watch the video screencast by CSS Tricks.

本文没有介绍的一点是使用同步多媒体集成语言(SMIL)为SVG图像制作动画. 而将CSV用于SVG则为您提供了使用您已经熟悉的东西的优势, SMIL takes things to the next level.

使用SMIL，您可以单独使用SVG实现高级动画效果，例如形状变形. A short, yet effective guide to using SMIL for such effects is available 在这里.

Although, support for SMIL is a 位 前卫 at 这 moment (no pun intended).

No-compromise 动画s for the Web

在本文中, 您已经了解了使用SVG路径上的CSS或HTML元素为SVG元素制作动画的几种方法.

SVG是轻量级的，无论屏幕大小如何，都可以用来生成清晰的图形, 缩放级别, 屏幕分辨率. 使用SVG, 提供现代的, vivid experience now is easier than ever, all while reaping the benefits of using st和ard web technologies.

就是这样! 希望您觉得这个SVG动画教程很有用，并且喜欢阅读它.