0

長方形が 1 から 3 に拡大縮小されてから 1 に縮小されるアニメーションを試しています。

<rect x="10" y="10" width="40" height="20"
      style="stroke: #000000; fill: none;">
    <animateTransform attributeName="transform" attributeType="XML"
                      type="scale"
                      from="1" to="3"
                      begin="0s" dur="10s"
                      additive="sum"
            />
</rect>

D3やraphael.jsではなく、純粋なSVGタグでこれを実現したいと考えています。これはどのように達成できますか？私は多くの方法を試しましたが、良い結果が得られませんでした。

4

1 に答える 1

1

これが目的の効果であるかどうかはよくわかりません。説明を少し明確にする必要があるかもしれません。ただし、アニメーションを組み合わせて、開始タグで別のアニメーションが終了したときにアニメーションを開始することもできます... jsfiddle here... http://jsfiddle.net/kSYHH/およびhttp://jsfiddle.net/kSYHH/3/

<svg>
  <rect x="10" y="10" width="40" height="20"
      style="stroke: #000000; fill: none;">
    <animateTransform attributeName="transform" attributeType="XML"
                  type="translate"
                  from="0" to="40"
                  begin="animout.end" dur="3s"
                  additive="sum"
                  fill="freeze"
      />

     <animateTransform attributeName="transform" attributeType="XML"
                  id="animout"
                  type="scale"
                  from="1" to="3"
                  begin="0s" dur="3s"
                  additive="sum"
     />
     <animateTransform attributeName="transform" attributeType="XML"
                  type="scale"
                  from="3" to="1"
                  begin="animout.end" dur="3s"
                  additive="sum"
                  fill="freeze"
     /> 


  </rect>
</svg>

また、Raphael.js Snap.js Pablo.js などの svg ライブラリを調べて、いくつかのビットを簡単にする他の人にも価値がありますが、純粋な svg 自体にしたいと述べています。

于 2013-11-25T10:28:21.230 に答える