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" 
 
\t 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" 
 
\t 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 arttribute设置为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" 
 
\t 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