4

我对 SVG 文件几乎一无所知，但必须使用一个来画一条线来指示路线（我对画布的了解不够多，无法选择）。

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

我从 Illustrator 导出了路径，但不知道如何反转它们。有没有办法可以反转动画？

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

4

3 回答 3

11

这是一种方法：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');
于 2012-07-11T14:17:26.847 回答
9

要反转路径方向，您需要在 Illustrator 中编辑路径文件。SVG 路径是定向的。路径标记描述了它们从哪里开始，以及它们移动到哪里。（它非常冗长，但也非常强大。）

在 Illustrator 中，使用直接选择工具选择路径，然后选择钢笔工具，然后单击一次您希望成为动画路径端点（巴士“停止”的位置）的位置。它在屏幕上看起来完全一样，但方向会颠倒。重新保存文件并将其换出。然后动画的 stroke-dashoffset 将走另一条路。

于 2012-07-11T01:25:37.653 回答
1

这绝对是可能的，只是您需要一种方法来确定“笔”在一系列操作之后的位置，因为您需要确定它完成绘图的位置以向后追溯其步骤。向后动画 SVG 涉及以下内容：

  1. 将 SVG 分解为由绝对运动分隔的分量曲线，并找出它们的端点。至少，您有一条具有单个端点的连续线。您需要向前播放曲线以计算其最终位置。

  2. 向后播放命令。在大多数情况下，这是微不足道的。需要回溯 (-x, -y) 的行 (+x, +y)。具有端点 (x1, y1) 和控制点 (x2, y2) 的曲线需要回溯为具有端点 (y1, x1) 和控制点 (y2, x2) 的曲线。每个命令都有它的反面。

一旦你得到了它，这只是一个向后播放每个组件的问题。困难的部分只是弄清楚每个组件的最终位置。基本上，您需要在不绘制的情况下向前播放每个组件。有很多可用的开源图形库可以帮助您解决这个问题。如果您发现自己编写代码来计算贝塞尔曲线的端点，那么您还不够努力。

于 2012-07-11T02:34:53.500 回答