Невозможно применить анимацию к элементу SVG. - PullRequest
4 голосов
/ 02 июня 2011

У меня есть следующий 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 всем внутри. Я удалил остальные элементы ради простоты.)

1 Ответ

10 голосов
/ 02 июня 2011

ОК, я перешел на анимацию со следующим.

<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"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...