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