2011-06-02 66 views
4

我有以下SVG文件。無法將動畫應用於SVG g元素

 <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

好的,我將其更改爲以下動畫。

<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'是什麼讓動畫凍結的最終值,您可以將它添加到任何動畫元素。 – 2011-06-02 11:05:08

+1

如果您找到了自己的解決方案,請在投票區域旁邊勾選以接受它。 :) – Spudley 2011-06-02 13:07:54