如何在SVG中反转动画线

Question

我对SVG文件几乎一无所知,但是必须使用一个来绘制一条线来指示一条路线(我不太了解画布以使其成为一个选项).

我找到了一些例子,并设法实现了我所追求的目标,但事实证明该线需要从右向左移动.

我从Illustrator导出路径,不知道如何反转它们.有没有办法可以扭转动画？

这是文件:http://jdfv.nl/route.svg

Answer 1

这是一种方式:http: //jsfiddle.net/VTp4D/

SVG文件的相关部分:

<path id="busTrack2" ...>
  <animate id="dashAnim2" attributeName="stroke-dashoffset" from="0" 
   to="0" dur="10s" begin="0" fill="freeze" keySplines="0 0.5 0.5 1" 
   calcMode="spline"/>
</path>

Javascript代码:

var busTrack = document.getElementById('busTrack2');
var busTrackAnim = document.getElementById('dashAnim2');
var trackLength = busTrack.getTotalLength().toString();
busTrack.setAttribute('stroke-dasharray',trackLength+','+trackLength);
// forward: 
// busTrackAnim.setAttribute('values',trackLength+';0');
// backward:
busTrackAnim.setAttribute('values','-'+trackLength+';0');

Answer 2

要反转路径方向,需要在Illustrator中编辑路径文件.SVG路径是方向性的.路径标记描述了它们的起始位置以及它们移动到的位置.(它非常冗长,但也非常强大.)

在Illustrator中,使用直接选择工具选择路径,然后选择钢笔工具,并单击要作为动画路径的端点(总线"停止")的内容.它在屏幕上看起来完全一样,但方向会相反.重新保存文件并将其交换出来.然后动画的stroke-dashoffset将走向另一个方向.