任何称职的前端工程师都知道碎片化的设备生态系统带来的挑战. 不同的屏幕尺寸, 决议, 而且长宽比也很难提供一致的体验. 对于那些想要提供完美像素体验的人来说更是如此.
可缩放矢量图形(svg)帮助解决了部分问题，并且做得非常好. 尽管它们有其局限性, svg在某些场合非常有用, 如果你有一个优秀的设计团队, 你也可以在不增加浏览器不必要的负担或阻碍加载时间的情况下，创造出更令人惊叹的视觉体验.
在过去的几个月, 我一直致力于一个广泛使用SVG及其动画和效果功能的项目. 在本文中, 我将分享如何使用SVG及其动画技术为您的web前端工作带来一些新的生命.
SVG是一种基于XML的图像格式，与HTML的工作原理非常相似. 它为许多熟悉的几何形状定义了不同的元素，这些几何形状可以在标记中组合以生成二维图形.
的 SVG规范 是万维网联盟(W3C)于1999年制定的开放标准.
所有主要的网络浏览器都有 SVG渲染支持 有一段时间了.
因为SVG图形是XML文档, web浏览器提供了基于DOM节点的api，可用于与图像交互. 谈论 让图片栩栩如生!
如果SVG中有一个强大的元素，那就是 <路径> 元素.
路径元素是一个基本的形状，可以用来创建几乎任何你能想到的高级2D形状.
元素通过接受一系列绘图命令来工作. 它很像1967年的Logo编程语言, 只有现代化和设计花哨的图形. 元素通过属性接受这一系列的绘图命令 d.
<路径 d="M10 10 L75 10 L75 75 Z" />
你可以想象一支在屏幕上画画的虚拟笔, 路径元素中的绘图注释仅控制笔. 在上面的例子中，笔被指示移动到某个位置 (10, 10) (M10 10)，划清界限 (75, 10) (L75 10)，划清界限 (75, 75) L75 75 然后通过返回起点来关闭路径(Z).
使用其他绘图命令，例如arcs (A)、二次贝塞尔曲线(Q)、三次贝塞尔曲线(C)等，您可以在SVG中创建更复杂的形状和图形.
您可以了解更多关于路径元素的信息 在这里.
“好吧，胡安，我明白了. 路径是强大的，但我如何动画它们?你说.
对于我们的第一项技术，我们将利用两个SVG属性: stroke-dasharray 和 stroke-dashoffset.
的 stroke-dasharray 属性控制用于描边路径的破折号和空白的模式. 如果你想把你的线条画成一组破折号和空白，而不是一个连续的笔画, 这是您将使用的属性.
SVG图像是web浏览器DOM的一部分，stroke-dasharray是一个表示元素, 该属性也可以使用CSS设置.
类似地, stroke-dashoffset 属性(指定在破折号模式中开始破折号的距离)也可以使用CSS来控制.
这两个SVG属性, 在一起, 可以用来动画SVG路径, 给观众一种错觉，即路径是逐渐绘制的.
以二次贝塞尔曲线为例:
<路径 fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="路径">
将这条路径动画化，就好像它是在屏幕上逐渐平滑地绘制的, 我们必须设置破折号(和间隙)长度, 使用stroke-dasharray属性, 等于路径长度. 这是为了使虚线曲线中的每个破折号和间隙的长度等于整个路径的长度.
接下来，我们将使用stroke-dashoffset属性将破折号偏移量设置为0. 这将使路径在屏幕上显示为一条实曲线(我们实际上是在看第一个破折号), 我们已经让每个破折号跨越了曲线的整个长度). 通过将虚线偏移量设置为曲线的长度, 我们最终会得到一条看不见的曲线(我们现在看到的曲线被渲染成一个完整的缺口——紧跟着破折号的部分)。.
现在，通过动画stroke-dashoffset属性，您可以使曲线逐渐出现在屏幕上.
看笔 total - SVG & CSS路径 by total 博客 (@toptalblog) on CodePen.
如你所见，曲线总是存在的. 我们只是改变了虚线偏移量，使虚线部分一点一点地出现.
你可以使用相同的原则，但要有更多的路径:
看笔 total - SVG & CSS路径 by total 博客 (@toptalblog) on CodePen.
这里有一条固定的黑色曲线, 沿着小路移动的红色的, 红色的后面还有一个黑色的，在40px后面.
Stroke-dasharray和stroke-dashoffset是两个非常强大的属性，可用于向SVG路径应用大量动画和效果. 你可以试试 这 方便的工具，您可以使用它来试验这两个属性.
使用SVG和CSS，您可以做的另一件很酷的事情是使对象或元素沿着路径移动.
我们将在动画中使用2个SVG属性:
offset-路径: offset-路径 CSS属性指定元素定位的偏移路径.
offset-distance: offset-distance CSS属性指定偏移路径上的位置.
通过结合这两个属性，你可以很容易地制作出这样的动画:
看笔 total - SVG & CSS路径 by total 博客 (@toptalblog) on CodePen.
如你所见，我们有了一个新元素 div.球.
这个元素可以是任何东西，div，图像，文本，等等. 在这个例子中的想法是，通过使用offset-路径和offset-distance，你可以给元素一个路径来跟随和动画距离，元素将通过路径移动.
如果所有这些还不够花哨，那么您总是可以求助于JavaScript.
用JavaScript为SVG元素制作动画与为DOM元素制作动画非常相似. 然而, 使用JavaScript, 你可以实现我们上面检查的动画技术, 但是更容易.
以前，我们必须在CSS中硬编码路径长度. 借助JavaScript函数 路径.getTotalLength () 可以即时计算路径的长度并根据需要使用它. 你可以了解更多 在这里.
除了, 已经有许多库可供您使用，它们可以使SVG动画变得比现在简单得多.
提前.svg 不仅使使用JavaScript绘制SVG图像变得容易, 这使得动画就像打电话一样简单 .动画({}).
另一个库, 动漫.js，使div元素跟随SVG路径 几行代码.
如果你正在寻找一个库，它可以自己做更多的事情，但结果仍然令人惊叹, 然后 Vivus 是你要找的吗. 它采用一种不同的、更多由配置驱动的方法来实现SVG路径动画. 有了这个图书馆, 您只需要向要绘制的SVG元素添加一个ID，并使用该ID定义一个Vivus对象. 维乌斯会处理好剩下的.
以下是在处理SVG图像并将其动画化时可能会发现有用的资源列表:
要更深入地了解SVG动画，可以阅读web上的这篇短文 SVG动画的三种方法 图片和观看视频截屏由CSS技巧.
本文没有介绍的一点是使用同步多媒体集成语言(SMIL)为SVG图像制作动画. 而将CSV用于SVG则为您提供了使用您已经熟悉的东西的优势, SMIL将事情带到了下一个层次.
使用SMIL，您可以单独使用SVG实现高级动画效果，例如形状变形. 关于如何使用SMIL实现这种效果，有一个简短而有效的指南 在这里.
尽管如此，对SMIL的支持仍然是一个问题 位 前卫 此时此刻(没有双关语).
在本文中, 您已经了解了使用SVG路径上的CSS或HTML元素为SVG元素制作动画的几种方法.
SVG是轻量级的，无论屏幕大小如何，都可以用来生成清晰的图形, 缩放级别, 屏幕分辨率. 使用SVG, 提供现代的, 生动的体验现在比以往任何时候都容易, 同时获得使用标准web技术的好处.
就是这样! 希望您觉得这个SVG动画教程很有用，并且喜欢阅读它.
stroke-dasharray属性确定要用作SVG路径笔画的破折号和空格的模式. stroke-dashoffset决定路径笔划开始时进入模式的距离.
要确定SVG路径的确切长度，可以使用路径.getTotalLength ()函数，其中路径是对象的DOM Node <路径> 元素.
Juan自2005年起担任系统工程师. 他是一个渴望学习的人，一个多才多艺的开发人员，并且非常注重细节.
作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.17
世界级的文章，每周发一次.
世界级的文章，每周发一次.
