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 some other place with animation, but it does not work. Is there something that I am missing here? (I want to animate the g
element with everything inside. I removed the rest of the elements for the sake of simplicity.)
OK, I changed to animation here with following.
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
from="0,0" to="1000,1000"
begin="0s" dur="1"
repeatCount="indefinite"/>
And it started to work.
UPDATE
I found a better solution. In the first one, after animation my group element is returning to its original position. With the follwing it stays where it is.
<animateMotion
from="0,0" to="500,0"
dur="4s" fill="freeze"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With