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>

更新

左側に再入力し、その後、四角で右に現在位置出口をアニメーション開始を持っているために、我々は2段階のアニメーションを持っている必要があります。

最初の段階は、正方形を右に移動して終了することです。 2番目のステージは、LHSから始まり全幅に渡るループアニメーションです。

最初の終了時に2番目のステージを開始するには、beginアートワークをfirststage.endに設定します。これは「同期ベース」値として知られているものです。 「firststage」は、第1ステージのアニメーション要素の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>

注意してください。それは旅行までの距離が短いので、実行時間を短縮して、2番目のステージで正方形が楽しく見えないようにする必要があります。

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