SVG动画 - 设置自定义启动位置

Question

i使用svg动画元素使用以下代码为矩形动画。

更新的代码

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

update

让动画从右侧的正方形启动开始，然后在左侧重新进入，我们需要有一个两个阶段的动画。

第一阶段是将正方形向右移动和退出。第二阶段是一个循环动画，从LHS开始，并全部宽度。

要在第一次完成时开始第二阶段，我们将begin Arttribute设置为firststage.end。这就是所谓的"同步基础"值。"第一阶段"是第一阶段动画元素的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