SVG => Animazione

Osservazioni

L'animazione SMIL tramite l'elemento <animate> è attualmente (luglio 2016) supportata nei principali browser ad eccezione dei browser Microsoft. Esiste una libreria (fakeSMIL) che può essere utilizzata come polyfill per la compatibilità Microsoft.

Chrome 45 ha perso SMIL in favore delle animazioni CSS e della prossima sintassi di animazione dichiarativa delle animazioni Web, che purtroppo è solo parzialmente implementata nei browser correnti. Ma gli sviluppatori di Chrome hanno recentemente sospeso il loro intento (vedi questa risposta 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

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

SVG
Animazione

Ricerca…

Osservazioni