元素接收的属性和要素相符，别的她还是能够接过八个属性：keyPoints，rotate和path。还应该有它们的calcMode天性有所分化：`元素的calcMode属性的默认值是paced，而不是linear`。
通过rotate来设置成分沿着路线运动的大方向
使用“元一贯钦定运动路线
在前边的两篇小说中大家介绍了SVG动漫中的元素的使用方法。在SMIL动画中，我们可以使用要平素创设路线动漫效果。路线动漫是指叁个因素沿着钦命的门路运动。
为了改进上边例子的BUG，大家设置rotate="auto"。
上边包车型客车事例是上边拾叁分例子的修改版本，同不常候做了某些改动：使用密封路线，并使运转Infiniti循环运动。
要创设文字的不二秘籍动画，大家将接收`元素的startOffset`来制作动漫。
“的隐瞒法则
那条渠道在始发绘制曲线后面，设想画笔被移动到坐标系之处。这里要求留意的是圈子的圆心在坐标系的岗位，而不是左上角地方。注意它们之间的细微差异。path特性的坐标类别是僵持于成分当前岗位的。
path特性用于钦定一条移动路线。它和`元素上的d`属性的格式和意义基本相近。
设若您想让小车沿着马路线的外场运动，能够安装rotate="auto-reverse"。
圆形沿那条路径运动的代码如下：
Text laid out along a path.
Textlaidoutalongapath.
上面包车型地铁代码中，路线的启幕坐标为。若是我们使用那条渠道作为移动路线，那么圆形会在运动早前向右跳动约九十几个单位，向下跳动约102个单位。然后才起来顺着马路线运动。
对此定义一个活动路线，mpath要素会覆盖path属性，也会覆盖values天性，还恐怕会覆盖from，by和to属性。
auto：成分自动依照运动路径的角度来更改它的活动方向。
上边代码的结果如下，点击圆形查看路线动漫效果：
code>startOffset代表文字在门路上的偏移。0%意味路线的上马，百分百表示路径的利落。若是设置为四分之二，文字将运动到路径的一半。
今昔，汽车沿着路线运动的效果与利益看起来就相比较符合规律了。不过还会有一点点小意思：汽车是反方向沿着马路线实行活动的。要改正它，大家须求将汽车沿Y轴翻转。我们可以通过在将汽车在Y轴方向上缩放”-1″来促成翻转效果。
用作活动路径的元素可以定义在文档的任何地方。甚至可以将它定义在要素中，並且不要将它渲染在画布上。
一旦你钦定的门道不是从伊始，那么圆形会在初叶活动在此之前蓦然跳动到你内定的岗位之上。举个例子，假如你在AI软件中绘制了一条曲线，并将它导出为二个SVG路线数据。输出的路线会相符上边包车型大巴榜样：
使用path天性来钦点运动路线
auto-reverse：这是auto在曲线的切线方向上的镜像。
使文字在任性路线上活动和任何SVG成分的渠道动漫有所分裂，它使用的是元素，而不是元素。
上面包车型地铁代码的回来结果是：
现在，获得的结果如上边包车型地铁样本：
由于animateMotion有三种艺术得以兑现均等的功用，大家必要分明在同偶然间接选举择这几个因素的时候，哪些属性会被遮住。
回到SVG教程目录
rotate质量有七个参数：
故此看起来古怪，是因为小车的趋向是固定的，不会依附曲线的趋向而更正。为了修改它，大家得以利用rotate属性。
另二个措施是利用transform属性来转变圆形的坐标类别，使它在运动在此以前被撤换为0坐标。
在底下的例证中，大家就利用三个手推车来替代圆形。这一个汽车有一个“元素组成。别的为了让小车沿着马路线运动，大家还增加了一个transform属性，让它的发端地方在地方。
先是咱们须求将文字定位在渠道上。那足以经过在元素中嵌套`>textPath>`元素来实现。然后使用`>textPath>`元素来指向一条实际的路径作为运动路径。被引用的路径可以是画布上的一条路径，也可以定义在中。
咱俩还足以选取另一种方法来钦命运动路线。除了选拔path数据解读 ，属性，大家得以接收元素来引用一条外部的路径。元素是`元素的子元素，它可以通过xlink:href`属性来援引外界的路径。
文字路线动漫
在上边的事例中，三个圆形沿着一条密封的门道不停的活动。假设运动的不是叁个圆形，而是三个有早晚运动方向的因素，举例身为二个小车图标，会发生什么样事情啊？
对此分明的点对应的keytimes属性，keytimes属性会覆盖path，还有恐怕会覆盖from，by和to属性。
Text laid out along a path.
一个缓和的不二诀假诺将圆形放置在坐标地方。即`元素的cx和cy`属性都为0。这样当使用路线的数目来改动它的时候，会收获精确的结果，圆形会沿着马路线实行活动。
当今，小车沿路线始于活动，可是看起来十三分的离奇：
取得的结果如上面包车型客车指南：
可以见见，大家将圆形的圆心修改为cx="0" cy="0"后来，获得了科学的结果。
何以会这么吗？那是因为圆形之处被path路线上的数量转变了。注意路径的初叶地方是M91.4,104.2SVG进阶 | SVG路径动画-SMIL-Web前端之家。，而不是。
在上边包车型大巴例子中，大家将活动路线绘制在画布上，几个圆形放置在渠道的上马地方。可是，当点击圆形后，它不会沿着马路线实行运动。点击下边的圈子看看效果：
Textlaidoutalongapath.
一个数值：指标元素具备一个一定的活动角度，那个角度由内定的数值决定。
上面来看二个例子，一个圆形将沿着上边包车型客车渠道举行移动：