Cannot apply animation to SVG g element

I have the following SVG file .

<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> 

I just want to move it to another location with animation, but that will not work. Is there something I'm missing here? (I want to animate the g element with everything inside. I just deleted the rest of the elements).

+4
source share
1 answer

OK, I changed the animation here as follows.

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

And he began to work.

UPDATE

I have found the best solution. In the first, after the animation, my group element returns to its original position. However, he remains where he is.

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

All Articles