SVG => Animering

Anmärkningar

SMIL-animering via <animate> -elementet stöds för närvarande (juli 2016) i stora webbläsare, med undantag för Microsoft-webbläsare. Det finns ett bibliotek (fakeSMIL) som kan användas som en polyfyll för Microsoft-kompatibilitet.

Chrome 45 avskrev SMIL till förmån för CSS-animationer och kommande webbanimationer deklarativa animationssyntax, som tyvärr endast delvis implementeras i nuvarande webbläsare. Men Chrome-utvecklarna avbröt nyligen sin avsikt (se detta svar på 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

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

SVG
Animering

Sök…

Anmärkningar