2011-06-02 10 views
4

私は以下のSVGファイルを持っています。SVG要素にアニメーションを適用できません

 <svg 
      xmlns:dc="http://purl.org/dc/elements/1.1/" 
      xmlns:cc="http://creativecommons.org/ns#" 
      xmlns:rdf="htntp://www.w3.org/1999/02/22-rdf-syntax-ns#" 
      xmlns:svg="http://www.w3.org/2000/svg" 
      xmlns="http://www.w3.org/2000/svg" 
      version="1.1" 
      width="1000" 
      height="650" 
      id="svgContainer"> 

      <g 
       id="truck"> 
       <animate attributeName="fill" from="black" to="red" dur="5s"/> 
       <path 
        d="m 655.589,484.36218 -6.18561,-128.61524 -110.99241,-15.79583 -34.55321,-87.58893 -94.74579,0 3.03024,178.75619 -322.238663,2.0203 0.145305,51.22351 z" 
        id="body" 
        fill="#000000" 
        stroke="#000000" 
        stroke-width="1px" 
        stroke-linecap="butt" 
        stroke-linejoin="miter" 
        stroke-opacity="1" /> 
       <animate attributeType="XML" attributeName="x" to="1000" begin="indefinite" dur="1s" /> 
       <animate attributeType="XML" attributeName="y" to="1000" begin="indefinite" dur="1s" /> 
      </g> 
     </svg> 
    </g> 
</svg> 

アニメーションで別の場所に移動したいだけですが、動作しません。私がここで紛失しているものがありますか? (g要素をアニメーション化したいので、残りの部分は削除しました)

答えて

9

[OK]をここでアニメーションに変更しました。

<animateTransform 
    attributeType="XML" 
    attributeName="transform" 
    type="translate" 
    from="0,0" to="1000,1000" 
    begin="0s" dur="1" 
    repeatCount="indefinite"/> 

それが機能し始めました。

UPDATE

私はより良い解決策を見つけました。最初のアニメーションでは、私のグループ要素は元の位置に戻ります。それはどこにとどまっています。

<animateMotion 
    from="0,0" to="500,0" 
    dur="4s" fill="freeze"/> 
+1

'fill = freeze'はアニメーションを最終値に固定するもので、アニメーション要素に追加できます。 –

+1

あなた自身の解決策を見つけた場合は、それを受け入れる投票エリアでアイコンをチェックしてください。 :) – Spudley

関連する問題