在前面的两篇文章中我们介绍了动画中的&animate&元素的使用方法。在SMIL动画中，我们可以使用&animateMotion&元素来制作路径动画效果。路径动画是指一个元素沿着指定的路径运动。
&animateMotion&元素接收的属性和&animate&元素相同，另外他还可以接收三个属性：keyPoints，rotate和path。还有它们的calcMode属性有所不同：&animateMotion&元素的calcMode属性的默认值是paced，而不是linear。
使用path属性来指定运动路径
path属性用于指定一条运动路径。它和&path&元素上的d属性的格式和含义基本相同。
下面来看一个例子，一个圆形将沿着下面的进行运动：
圆形沿这条路径运动的代码如下：
&animateMotion
xlink:href="#circle"
begin="click"
fill="freeze"
path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5" /&
这条路径在开始绘制曲线之前，虚拟画笔被移动到坐标系的(0,0)位置。这里需要注意的是圆形的圆心在坐标系的(0,0)位置，而不是左上角位置。注意它们之间的细微差别。path属性的坐标系统是相对于元素当前位置的。
上面代码的结果如下，点击圆形查看路径动画效果：
如果你指定的路径不是从(0,0)开始，那么圆形会在开始运动之前突然跳动到你指定的位置之上。例如，假设你在AI软件中绘制了一条曲线，并将它导出为一个SVG路径数据。输出的路径会类似下面的样子：
&path fill="none" stroke="#000000" stroke-miterlimit="10" d="M100.4,102.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/&
上面的代码中，路径的开始坐标为（100.4,102.2）。如果我们使用这条路径作为运动路径，那么圆形会在运动之前向右跳动约100个单位，向下跳动约102个单位。然后才开始沿着路径运动。
使用&mpath&元素来指定运动路径
我们还可以使用另一种方法来指定运动路径。除了使用path属性，我们可以使用&mpath&元素来引用一条外部的路径。&mpath&元素是&animateMotion&元素的子元素，它可以通过xlink:href属性来引用外部的路径。
&animateMotion xlink:href="#circle" dur="1s" begin="click" fill="freeze"&
&mpath xlink:href="#motionPath" /&
&/animateMotion&
作为运动路径的&path&元素可以定义在文档的任何地方。甚至可以将它定义在&defs&元素中，并且不用将它渲染在画布上。
在下面的例子中，我们将运动路径绘制在画布上，一个圆形放置在路径的开始位置。但是，当点击圆形后，它不会沿着路径进行运动。点击下面的圆形看看效果：
&svg width="500" height="350" viewBox="0 0 550 350"&
&path id="motionPath-2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/&
&circle id="circle-2" r="20" cx="100" cy="100" fill="tomato" /&
&animateMotion
xlink:href="#circle-2"
begin="click"
fill="freeze"&
&mpath xlink:href="#motionPath-2" /&
&/animateMotion&
为什么会这样呢？这是因为圆形的位置被path路径上的数据转换了。注意路径的开始位置是M91.4,104.2，而不是(0,0)。
一个解决的办法是将圆形放置在(0,0)坐标位置。即&circle&元素的cx和cy属性都为0。这样当使用路径的数据来转换它的时候，会得到正确的结果，圆形会沿路径进行运动。
另一个方法是使用属性来转换圆形的坐标系统，使它在运动之前被转换为0坐标。
下面的例子是上面那个例子的修正版本，同时做了一些修改：使用闭合路径，并使运行无限循环运动。
&svg width="500" height="350" viewBox="0 0 500 350"&
&path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M202.4,58.3c-13.8,0.1-33.3,0.4-44.8,9.2
c-14,10.7-26.2,29.2-31.9,45.6c-7.8,22.2-13.5,48-3.5,70.2c12.8,28.2,47.1,43.6,68.8,63.6c19.6,18.1,43.4,26.1,69.5,29.4
c21.7,2.7,43.6,3.3,65.4,4.7c19.4,1.3,33.9-7.7,51.2-15.3c24.4-10.7,38.2-44,40.9-68.9c1.8-16.7,3.4-34.9-10.3-46.5
c-9.5-8-22.6-8.1-33.2-14.1c-13.7-7.7-27.4-17.2-39.7-26.8c-5.4-4.2-10.4-8.8-15.8-12.9c-4.5-3.5-8.1-8.3-13.2-11
c-6.2-3.3-14.3-5.4-20.9-8.2c-5-2.1-9.5-5.2-14.3-7.6c-6.5-3.3-12.1-7.4-19.3-8.9c-6-1.2-12.4-1.3-18.6-1.5
C222.5,59,212.5,57.8,202.4,58.3"/&
&circle id="circle" r="10" cx="0" cy="0" fill="tomato" /&
&animateMotion
xlink:href="#circle"
begin="0s"
fill="freeze"
repeatCount="indefinite"&
&mpath xlink:href="#motionPath" /&
&/animateMotion&
可以看到，我们将圆形的圆心修改为cx="0" cy="0"之后，得到了正确的结果。
&animateMotion&的覆盖规则
由于animateMotion有多种方式可以实现相同的效果，我们需要明确在同时使用这些元素的时候，哪些属性会被覆盖。
覆盖的规则如下：
对于定义一个运动路径，mpath元素会覆盖path属性，也会覆盖values属性，还会覆盖from，by和to属性。
对于确定的点对应的keytimes属性，keytimes属性会覆盖path，还会覆盖from，by和to属性。
通过rotate来设置元素沿路径运动的方向
在上面的例子中，一个圆形沿着一条封闭的路径不停的运动。如果运动的不是一个圆形，而是一个有一定运动方向的元素，比如说是一个小车图标，会发生什么事情呢？
在下面的例子中，我们就使用一个小车来代替圆形。这个小车有一个&g&元素组成。另外为了让小车沿着路径运动，我们还添加了一个transform属性，让它的初始位置在(0,0)位置。
代码如下：
&svg width="500" height="350" viewBox="0 0 500 350"&
&path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M202.4,58.3c-13.8,0.1-33.3,0.4-44.8,9.2
c-14,10.7-26.2,29.2-31.9,45.6c-7.8,22.2-13.5,48-3.5,70.2c12.8,28.2,47.1,43.6,68.8,63.6c19.6,18.1,43.4,26.1,69.5,29.4
c21.7,2.7,43.6,3.3,65.4,4.7c19.4,1.3,33.9-7.7,51.2-15.3c24.4-10.7,38.2-44,40.9-68.9c1.8-16.7,3.4-34.9-10.3-46.5
c-9.5-8-22.6-8.1-33.2-14.1c-13.7-7.7-27.4-17.2-39.7-26.8c-5.4-4.2-10.4-8.8-15.8-12.9c-4.5-3.5-8.1-8.3-13.2-11
c-6.2-3.3-14.3-5.4-20.9-8.2c-5-2.1-9.5-5.2-14.3-7.6c-6.5-3.3-12.1-7.4-19.3-8.9c-6-1.2-12.4-1.3-18.6-1.5
C222.5,59,212.5,57.8,202.4,58.3"/&
&g id="car" transform="translate(-234.4, -182.8)"&
&path d="M234.4,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C240.8,185.6,238,182.8,234.4,182.8z"/&
&circle cx="234.4" cy="189.2" r="2.8"/&
&path d="M263,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C269.4,185.6,266.6,182.8,263,182.8z"/&
&circle cx="263" cy="189.2" r="2.8"/&
&path d="M275,171.4c-2.8-0.7-5.2-3-6.3-5.1l-3.9-7.4c-1.1-2.1-3.9-3.8-6.3-3.8h-22.6c-2.4,0-5,1.8-5.7,4.1l-2.4,7
c-0.2,0.9-1.8,5.5-5,5.5c-2.4,0-5,3.1-5,5.5v8.2c0,2.4,1.9,4.3,4.3,4.3h4.5c0-0.2,0-0.3,0-0.5c0-4.3,3.5-7.8,7.8-7.8
c4.3,0,7.8,3.5,7.8,7.8c0,0.2,0,0.3,0,0.5h13.1c0-0.2,0-0.3,0-0.5c0-4.3,3.5-7.8,7.8-7.8s7.8,3.5,7.8,7.8c0,0.2,0,0.3,0,0.5h8.1
c2.4,0,4.3-1.9,4.3-4.3v-6.5C283.2,172,277.3,172,275,171.4z"/&
&path d="M241.8,170.3h-12.5c0.7-1.1,1.1-2.2,1.2-2.6l2-5.9c0.6-1.9,2.8-3.5,4.8-3.5h4.5V170.3z"/&
&path d="M246.1,170.3v-12h10.4c2,0,4.4,1.5,5.3,3.3l3.3,6.3c0.4,0.8,1.1,1.7,2,2.4H246.1z"/&
&animateMotion
xlink:href="#car"
begin="0s"
fill="freeze"
repeatCount="indefinite"&
&mpath xlink:href="#motionPath" /&
&/animateMotion&
现在，小车沿着路径开始运动，但是看起来十分的怪异：
之所以看起来怪异，是因为小车的方向是固定的，不会根据曲线的方向而改变。为了修正它，我们可以使用rotate属性。
rotate属性有三个参数：
auto：元素自动根据运动路径的角度（曲线的切线方向）来改变它的运动方向。
auto-reverse：这是auto在曲线的切线方向上的镜像。
一个数值：目标元素具有一个恒定的运动角度，这个角度由指定的数值决定。
为了修正上面例子的BUG，我们设置rotate="auto"。
&animateMotion
xlink:href="#car"
begin="0s"
fill="freeze"
repeatCount="indefinite"
rotate="auto"&
现在，得到的结果如下面的样子：
如果你想让小车沿路径的外围运动，可以设置rotate="auto-reverse"。
&animateMotion
xlink:href="#car-3"
begin="0s"
fill="freeze"
repeatCount="indefinite"
rotate="auto-reverse"&
现在，小车沿路径运动的效果看起来就比较正常了。但是还有一点小问题：小车是反方向沿路径进行运动的。要修正它，我们需要将小车沿Y轴翻转。我们可以通过在将小车在Y轴方向上缩放"-1"来实现翻转效果。
&g id="car" transform="scale (-1, 1) translate(-234.4, -182.8)"&
得到的结果如下面的样子：
文字路径动画
使文字在任意路径上运动和其它SVG元素的路径动画有所不同，它使用的是&animate&元素，而不是&animateMotion&元素。
首先我们需要将文字定位在路径上。这可以通过在&text&元素中嵌套&textPath&元素来实现。然后使用&textPath&元素来指向一条实际的路径作为运动路径。被引用的路径可以是画布上的一条路径，也可以定义在&defs&中。
&svg width="500" height="350" viewBox="0 0 500 350"&
&path id="myPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/&
&textpath xlink:href="#myPath"&
Text laid out along a path.
&/textpath&
得到的结果如下所示：
Text laid out along a path.
要制作文字的路径动画，我们将使用&animate&元素的startOffset来制作动画。
code>startOffset代表文字在路径上的偏移。0%表示路径的开始，100%代表路径的结束。如果设置为50%，文字将移动到路径的一半。
&svg width="500" height="350" viewBox="0 0 500 350"&
&path id="myPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/&
&textpath xlink:href="#myPath"&
Text laid out along a path.
&animate attributeName="startOffset" from="0%" to ="100%" begin="0s" dur="5s" repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0.1 0.2 .22 1"/&
&/textpath&
上面的代码的返回结果是：
Text laid out along a path.
本文版权属于jQuery之家，转载请注明出处：查看: 279|回复: 0
帅气的SVG路径描边动画 (path animation) 实战应用
这是我的一个关于SVG的应用的技术分享网站，会同步一些文章到这里来，更多关于SVG技术应用可以去网站看看。
要是觉得文章还不错的话，可以多多推荐哦。
今天这篇文章来聊聊SVG路径描边动画。
关于路径描边动画大家可以去看看这两个网站，Playstation 4和Xbox One，这两个网站中就使用了SVG中的路径（path）来实现的描边动画效果。
上面图所示的效果就是我们要实现的效果。
准备矢量文件
在实际编写动画效果前，最重要的是要准备矢量文件。第一步是要使用Illustrator来创建你需要描边效果的矢量文件，需要使用钢笔工具来创建描边效果的矢量文件。当然如果你仅仅是对怎么实现描边的动画效果感兴趣，可以跳过这一步。
在设计图形的时候，要养成良好的图层命名习惯，尤其是要导出SVG文件的时候更应如此。如果不对图层命好命，那么导出来的SVG文件会异常复杂难以辨认，所以为了后面开发方便，还是好好的对图层命好命吧。图层的名字保持简洁容易理解就可以了。对于嵌套的子图层也要命好名，如下图所示：
设计好图形后，就可以使用Illustrator来导出为SVG文件了，在导出文件前需要对图形进行一些设置，相关的设置可以去看看我以前写一篇文章，这里就不再阐述了。
输出SVG文件
再一次提醒在输出SVG文件前，记得把图层命好名。上面的图像导出SVG后，使用代码编辑器工具打开SVG文件：
看到代码里的ID了么？通过ID我们就可以清楚的知道每条路径（patn）所对应的图形，这就是图层命名带来的好处。想象一下，如果你在导出前没有命好名，为了找到每条路径（path）所对应的图形那是怎样的一种痛苦。
当然导出SVG后，还需要进一步优化和压缩SVG文件，一般使用像SVGO类似的工具就可以很好的对SVG文件进行优化。不过，像我们现在这样要直接来操纵SVG文件来编写动画效果，最好是不要以开始就对SVG文件进行优化。我们可以在边写完动画效果后再对它进行优化。
至于SVG文件的优化可以去看看这篇文章。
在开始实现路径（path）描边动画前，先要明白stroke-dasharray 和stroke-dashoffset这两个概念。
Stroke Dash Array
在SVG中也可以像CSS中那样指定边框为虚线要用到属性stroke-dasharray。stroke-dasharray属性的参数，是一组用逗号分割的数字组成的序列。需要注意的是，这里的数字必须用逗号分割，虽然也可以插入空格，但是数字之间必须用逗号分开。每一组数字，第一个用来表示实线，第二个用来表示空白。
如果只有一个数字5，则表示会先画5px实线，紧接着是5px空白，然后又是5px实线，从而形成虚线。
比如我有一条200px的线，我把stroke-dasharray的指定为200，它就表示先画200px实线，紧接着是200px空白，然后又是200px实线，从而形成虚线。
Stroke Dash Offset
stroke-dashoffset属性表示路径从开始位置的偏移量。比如在下面我定义了stroke-dasharray的值为5、10、30、10表示5px的虚线、10px的空白、30px的虚线、10px的空白，如此循环。然后，通过改变它的stroke-dashoffset的值来看看会发生什么：
从图片中可以看到，通过调整stroke-dashoffset的值，可以重新设置路径开始的位置。在上面的实例中，我设置stroke-dashoffset的值为15px，可以看到路径移动了15px的距离。
动态改变偏移值
我们把路径的stroke-dasharray和stroke-dashoffset都设置为200px的值，会发现什么也看不到了，因为路径的虚线和空白距离都是一样的，而stroke-dashoffset的值也是200px，即表示路径从开始的位置偏移了200px的值（记住路径的偏移是从左边的原点开始的），所以就看到一片空白。
如果使用CSS3的来动态改变路径的偏移值即从200px到0，就会看到路径就像是用笔慢慢画出来的。
冰淇淋描边动画效果
原理明白，下面正式开干了。
首先在Illustrator中得到相关路径的长度，可以在文档信息面板中得到路径的长度。
为了更好的来编写动画效果，需要给每一个路径赋予了一个类名，这样可以针对每一条路径来更加精细控制动画效果。
然后，使用上面说的stroke-dasharray 和stroke-dashoffset两个属性来实现描边动画效果。
一个帅气的路径描边动画效果就实现了。
看起来好像不错了，但是还有优化的空间。
进一步优化
通过改变一些路径的虚线的长度，可以达到加快路径绘制的动画效果。很好理解，同样在2s内绘制一个短的虚线肯定要比绘制一个长的虚线的要快，即移动小一点的偏移量要比大一点的偏移值在同样的时间内肯定是要快一点。配合动画的延迟执行即animation-delay可以使动画效果更有趣一点。
最终线上代码效果可以去这里看看demo。
最后要提醒一点的是：这种动画效果对于使用embedded方式来引入SVG的情形是不支持的。如果要使用这样的动画效果，最好是使用inline svg的方式来引入svg即直接把SVG文件代码写到html文件中。
下面来说说一些浏览器的支持情况。
Mircosoft Edge
最新的Mircosoft Edge浏览器是支持这种描边动画效果的，不过它要求使用有明确单位的值，比如stroke-dasharray的值就必须为200px。
Internet Explorer
不幸的的是，Internet Explorer浏览器不支持在CSS中使用动画来控制stroke-dashoffset的值。
如果你一定要在IE上也实现描边动画效果，可以借助下面两种javascript方法来实现：
解决方法1。
解决方法2是使用一个javascript的库来实现，vivus。
原文地址，根据自己的理解有所删减。
推荐参考资料：
How SVG Line Animation Works
Polygon feature design: SVG animations for fun and profit
上一篇：下一篇：让文字沿着路径动起来 (SVG) - 推酷
让文字沿着路径动起来 (SVG)
路径动画的效果还是挺有意思的，而 Web 中常用的方法就是 SVG。 先上一个效果图：
要在 SVG 里面实现文字路径动画还是比较简单的，SVG 里面就有天然的支持。
我们先搞个 SVG 路径
&svg id=&textPathDemo& xmlns=&http://www.w3.org/2000/svg& xmlns:xlink=&http://www.w3.org/1999/xlink& width=&960& viewBox=&0 0 581 120&&
&path stroke=&#FF4444& d=&M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1& fill=&none& stroke-width=&1& stroke-dasharray=&5 5& id=&text-path1&&&/path&
xlink:href=&#text-path1& class=&text-content& textLength=&160& startOffset=&160&&
SVG 文字路径动画
&/textPath&
这里的 path 就是用来定义路径的，这个路径我是网上找的，一般做的话可以用 AI 等 SVG 制作工具，几个关键属性介绍一下。
stroke-dasharray 表示用虚线描边。可选值为none, , inherit。
none 表示不用虚线描边
inherit 表示继承
这个属性很有用，基本上 SVG 动画都需要用到，这是一个逗号或者空格分隔的数值列表，第一个值表示线段的长度，第二个值表示线段间空白的长度，例子中 stroke-dasharray=&5 5&中，第一个 5 表示虚线中的线段的长度，而第二个 5 表示两个线段间的长度是 5px。所以出来的效果是每段虚线的间隔都是一样的。其实这个dasharray可以不只两个值，可以有很多个，会循环依次用到线段和空白之间。
stroke,stroke-width 分别表示描边长度和描边宽度，这里就是改颜色用的。
这里比较关键的是 textPath 这个节点，这里就是定义文字按照什么路径排列的。
其中主要的属性： - xlink:href ： 这里表示要用哪条路径，注意我们在 path 那设置的 id 属性。 - textLength ： 表示文字的长度，这里 160 是我瞎猜的。 - startOffset ： 表示文字开始的偏移量，也就是文字开始点在路径中的位置。
现在出来的效果是这样的：
现在还没动，要让它动起来很简单，上面我们介绍了 startOffset 属性表示文字起始点，只要改变这个起始点就可以动了。
于是我们来加点 javascript：
var txtEle = $(&.text-content&);
var rafId =
var isEnd =
var animateFunc = function(start, step, end){
var startOffset = start +
if (startOffset &= end){
startOffset = end
// txtEle.attr(&startOffset&, startOffset); // not work
txtEle[0].setAttribute(&startOffset&, startOffset);
if(isEnd){
cancelAnimationFrame(rafId);
requestAnimationFrame(function(){
animateFunc(startOffset,step,end);
var steps = Math.round(
// 5000 means 5s
var len = 830;
var step = len /
animateFunc(-160, step, len);
代码比较简单，但是有几个地方我要说明一下。 首先是我把 jQuery 里面设置的 attr 的方法 txtEle.attr(&startOffset&, startOffset); 注释了，因为 jq 会把属性用小写写到元素里面，而这里的 startOffset 偏偏是大小写敏感的，所以要改用 dom 的 setAttribute 方法。 然后，这段代码里面有几个地方写的是 hard code，比如 var len = 830; ，中的 830， animateFunc(-160, step, len); 中的 -160。
这里 830 表示的是文字要走的路径的长度，这 830 是我大概算出来的，因为我们想文字停在最后那里，而不是跑出去，计算方法是路径的长度减去文字长度，当然这个值不是很准确。
animateFunc(-160, step, len); 中的 -160 表示的是文字起始点，因为我们想有个进场效果，而不是所有文字一开始就排在起始点，所以要负出去，而 160 是我大概算的文字长度，这里也不准确。
写完这段 js，发现自己兜了个大圈。之前在
一文中介绍过 SVG 的 animate 标签，如果只是单纯的动，这里大可以用 animate 来做。
添加 animate 到 textPath 中：
xlink:href=&#text-path1& class=&text-content& textLength=&160& startOffset=&-160&&
SVG 文字路径动画
&animate attributeName=&startOffset& from=&-160& to =&830& begin=&0s& dur=&5s& repeatCount=&1&/&
&/textPath&
这里 attributeName表示动画属性是 startOffset，begin 表示开始的延时，dur 表示时间整个动画的时间，frome 和 to 表示初始值和最终值，repeatCount 表示重复次数，这里是 1 次，如果用 indefinite 表示无限次。只是加这个进去，是没有停在最后的样式的，做完一次，字就不见了。这里 from 和 to 也可以用 0% 和 100% ，这样就没有进场效果。这个节点虽然好用，但是还是比较适合无限循环运动的场景。
这里要想精细的控制，还是要靠 js。
但是，作为一个要弄懂这是什么，从哪里来，到哪里去的程序员，面对代码中很多半猜半算的值，是不能视而不见的，而且路径什么的现在都是写死的，弊端略大，于是我们可以借助一个强大的库，snap.svg.js。
Snap.svg 是一个强大的 SVG 操作库，提供了丰富的接口，唯一的问题是，你需要了解熟悉 SVG 的基础知识。
引入 Snap.svg 之后，我们的 html 代码可以变得比较简单：
&svg id=&textPathDemo& xmlns=&http://www.w3.org/2000/svg& xmlns:xlink=&http://www.w3.org/1999/xlink& width=&960& viewBox=&0 0 581 120&&
&script src=&/snap.svg/0.4.1/snap.svg-min.js&&&/script&
就留一个 SVG 元素就好。
然后我们就开始利用 Snap.svg 帮我们干活。
window.onload = function () {
var path = &M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1&;
var s = Snap('#textPathDemo');
path = s.path(path).attr({ 'fill': 'none', 'stroke': '1',&stroke&:&#FF4444&,&stroke-dasharray&:&5 5&});
var pathLength
= Snap.path.getTotalLength(path);
console.log(pathLength);
var txt = s.text(0,0,'SVG 文字路径动画');
var txtLength = txt.node.clientW
var text = txt
.attr({ 'textpath': path, 'fill':'#003399' })
.textPath.attr({ 'startOffset': -txtLength })
.animate({ 'startOffset': pathLength-txtLength }, 5000, mina.easeinout );
代码不是很长，简单解释一下。
一开始定义了一段 path，这里就是我们要用来做路径动画用的。
然后创建一个 snap 对象： var s = Snap('#textPathDemo'); 。
把 path 放到我们的 snap 中，并设置了一堆之前我们在 html 里面设置的属性 path = s.path(path).attr({ 'fill': 'none', 'stroke': '1',&stroke&:&#FF4444&,&stroke-dasharray&:&5 5&});
高潮来了， var pathLength = Snap.path.getTotalLength(path); 算出路径的长度，不用猜了。
创建文字， var txt = s.text(0,0,'SVG 文字路径动画');
算出文字长度， var txtLength = txt.node.clientW ，这里说一下，我在 Snap 的文档中没找到怎么算文字长度的，这个是打印上面那个 txt 对象后发现的，如果有更好的方法，麻烦告知哈。
给文字设置一堆东西 var text = txt.attr({ 'textpath': path, 'fill':'#003399' }) ，主要设置 textpath 。
设置 textpath 中的属性： .textPath.attr({ 'startOffset': -txtLength }) 这里是支持链式调用的，设置起始点为 -txtLength 是为了有文字进场效果。
设置动画，给爷动一个。 .animate({ 'startOffset': pathLength-txtLength }, 5000, mina.easeinout ); 这里设置了要做动画的属性为 startOffset ，最后的位置为 pathLength-txtLength 即路径长度减去文字长度，动画时间 5000 毫秒，以及动画函数 main.easeinout 这个动画函数是库提供的，类比 css3 中的 easeinout 的效果，比之前我们用匀速要生动一些。
简简单单，再也不用猜长度值了，文字改版的时候也不用手动计算文字长度。 产品经理跟我说文字是不会变的，我知道这是最大的谎言。
由于我对 SVG 也不是太熟悉，有些地方可能有所疏漏，有什么疑问欢迎留言，有什么写错的地方，欢迎指出哈。
SVG Demo 源码地址：
Snap.svg Demo 源码地址：
如果页面使用了 base 标签，可能会引起路径找不到的情况，可以参考
记录一些所思所想，写写科技与人文，写写生活状态，写写读书感悟，主要是扯淡和感悟，欢迎关注，交流。
微信公众号：程序员的诗和远方
公众号ID : MonkeyCoder-Life
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致