Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot apply animation on 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 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.)

like image 566
yilmazhuseyin Avatar asked Dec 27 '22 19:12

yilmazhuseyin


1 Answers

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"/>
like image 136
yilmazhuseyin Avatar answered Dec 30 '22 10:12

yilmazhuseyin