我对 SVG 文件几乎一无所知,但必须使用一个来绘制一条线来指示路线(我对 Canvas 的了解不够,无法选择)。
我找到了一些例子并设法实现了我所追求的目标,但事实证明该线需要从右向左移动。
我从 Illustrator 导出了路径,但不知道如何反转它们。有没有办法可以反转动画?
这是文件:http://jdfv.nl/route.svg
最佳答案
这是一种方法:
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');
关于animation - 如何反转SVG中的动画线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11417541/