svg animate - 设置自定义起始位置

Question

我使用 SVG animate 元素通过以下代码为矩形设置动画。

更新代码

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 1600 700" enable-background="new 0 0 1600 700" xml:space="preserve">
  <g>
    <rect x="200" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="x" from="-100" to="100%"
               dur="10s" repeatCount="indefinite"/>
    </rect>
  </g>
</svg>

动画从 -100 开始，然后一直移动到 svg 元素的 100%。如何使矩形从其中定义的 x 位置 (x="200") 开始动画，然后转到屏幕的右端并从左侧以连续循环动画的形式返回？

另外，如何将 SVG 元素显示为 100% 的屏幕宽度（如引导流体容器）？

提前致谢。

Answer 1

不要使用from 和to，而是使用values。 values 采用分号分隔的值列表，您希望它在它们之间进行动画处理。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 1600 700" enable-background="new 0 0 1600 700" xml:space="preserve">
  <g>
    <rect x="200" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="x" values="-100;100%;-100"
               dur="10s" repeatCount="indefinite"/>
    </rect>
  </g>
</svg>

更新

要让动画从方块当前位置开始向右退出，然后从左侧重新进入，我们需要有一个两阶段动画。

第一阶段是让方块向右移动并退出。第二阶段是一个循环动画，从 LHS 开始，一直延伸到整个宽度。

为了在第一个阶段结束时开始第二个阶段，我们将begin 艺术属性设置为firststage.end。这就是所谓的“同步基础”值。 “firststage”是第一阶段动画元素的id。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 1600 700" enable-background="new 0 0 1600 700" xml:space="preserve">
  <g>
    <rect x="200" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="x" to="100%"
               dur="8.2s" id="firststage"/>
      <animate attributeType="XML" attributeName="x" from="-100" to="100%"
               dur="10s" repeatCount="indefinite" begin="firststage.end"/>
    </rect>
  </g>
</svg>

请注意，我们调整了第一阶段的持续时间。它的行驶距离更短，所以我们需要减少它的运行时间，以免广场在第二阶段显得更快。

((1600-200) / (1600-(-100))) * 10s = 8.2s