SVG => Animation

Bemerkungen

SMIL-Animationen über das <animate> -Element werden derzeit (Juli 2016) mit Ausnahme von Microsoft-Browsern in gängigen Browsern unterstützt. Es gibt eine Bibliothek (fakeSMIL), die als Polyfill für Microsoft-Kompatibilität verwendet werden kann.

Chrome 45 lehnte SMIL zugunsten von CSS-Animationen und der bevorstehenden deklarativen Animationssyntax für Webanimationen ab, die in aktuellen Browsern leider nur teilweise implementiert wird. Die Chrome-Entwickler haben jedoch vor kurzem ihre Absicht aufgegeben (siehe StackOverflow-Antwort ).

<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

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

SVG
Animation

Suche…

Bemerkungen