为什么我不能让 svg animatemotion 使用绝对路径答案

【问题标题】：Why can't I get svg animatemotion to use absolute paths为什么我不能让 svg animatemotion 使用绝对路径
【发布时间】：2014-12-09 14:07:43
【问题描述】：

SVG Path documentation 声明使用大写 (M, L) 字母表示坐标是绝对坐标。所以在这条路径中，它会到达绝对坐标 100,100。

  <rect x="200" y="0" width="30" height="15" style="stroke: #ff0000;">
          <animateMotion path="M0,0 L100,100" begin="0s" dur="1s" repeatCount="indefinite" />
  </rect>

但这在现实中似乎并非如此。 Here is a simple fiddle 为矩形设置动画。起点为 200,0。如果它移动到 100,100，那么它应该向下和向左移动。它不是。它向右移动。怎么回事？

（我的目标是创建一个通过一系列绝对坐标移动的动画，并根据用户输入动态删除坐标，而不会影响后续动画。因此我需要使用绝对坐标。）

【问题讨论】：

标签： animation svg path jquery-animate

【解决方案1】：

如果您希望将坐标系的原点设置为 (0,0)，则应将 rect 元素定义为 (0,0) 或 x="0" y="0"。在此之后，为您的 animateMotion 定义path="M200,0 L100,100" 将达到您想要的效果。

这是因为 SVG 变换的坐标系默认以变换元素为中心，因此坐标 (0,0) 将位于定义元素的位置。请参阅http://sarasoueidan.com/blog/svg-transformations/ 的坐标系变换部分，了解相关内容。

【讨论】：

【解决方案2】：

The effect of a motion path animation is to add a supplemental transformation matrix onto the CTM for the referenced object which causes a translation along the x- and y-axes of the current user coordinate system by the computed X and Y values computed over time.

因此，如果您希望对象从 0,0 开始设置 x="0" 而不是 x="200"

【讨论】：