SVG => Animation

Remarques

L'animation SMIL via l'élément <animate> est actuellement (juillet 2016) prise en charge dans les principaux navigateurs, à l'exception des navigateurs Microsoft. Il y a une bibliothèque (fakeSMIL) qui peut être utilisée comme polyfill pour la compatibilité avec Microsoft.

Chrome 45 déconseillait SMIL en faveur des animations CSS et de la syntaxe d'animation déclarative des animations Web à venir, qui n'est malheureusement que partiellement implémentée dans les navigateurs actuels. Mais les développeurs Chrome ont récemment suspendu leur intention (voir cette réponse 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

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

SVG
Animation

Recherche…

Remarques