animation - 如何反转SVG中的动画线

Question

我对 SVG 文件几乎一无所知，但必须使用一个来绘制一条线来指示路线(我对 Canvas 的了解不够，无法选择)。

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

我从 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');