SVG => Анимация

замечания

Анимация SMIL через элемент <animate> в настоящее время (июль 2016) поддерживается в основных браузерах, за исключением браузеров Microsoft. Существует библиотека (fakeSMIL), которая может использоваться как полипол для совместимости с Microsoft.

Chrome 45 не одобрял SMIL в пользу анимации CSS и синтаксиса декларативной анимации предстоящей веб-анимации, которая, к сожалению, частично реализована только в текущих браузерах. Но разработчики Chrome недавно приостановили свое намерение (см. Этот ответ StackOverflow )

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="50" y="50" height="100" width="100" stroke="black" fill="yellow">
        <animate
            attributeType="XML"
            attributeName="height"
            begin="0s"
            dur="10s"
            from="100"
            to="200"
            repeatCount="indefinite"
        />
    </rect>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="50" y="50" height="100" width="100" stroke="black" fill="yellow">
        <animateTransform
            attributeType="XML"
            attributeName="transform"
            type="rotate"
            begin="0s"
            dur="10s"
            from="0"
            to="360"
            repeatCount="indefinite"
        />
    </rect>
</svg>

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

SVG
Анимация

Поиск…

замечания