Question

使用大写（M，L）字母的SVG Path documentation表示坐标是绝对的。因此，在此路径中，它将转到绝对坐标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那么它应该向下移动并向左移动。它不是。它向右移动。发生了什么事？

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

Answer 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/的“坐标系变换”部分，了解相关内容。

Answer 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"

为什么我不能使用svg animatemotion来使用绝对路径

2 个答案: