SVG => animatie

Opmerkingen

SMIL-animatie via het <animate> -element wordt momenteel (juli 2016) ondersteund in grote browsers met uitzondering van Microsoft-browsers. Er is een bibliotheek (fakeSMIL) die kan worden gebruikt als polyfill voor Microsoft-compatibiliteit.

Chrome 45 heeft SMIL afgeschaft ten gunste van CSS-animaties en aanstaande declaratieve animatiesyntaxis van webanimaties, die helaas slechts gedeeltelijk in de huidige browsers is geïmplementeerd. Maar de Chrome-ontwikkelaars hebben onlangs hun intentie opgeschort (zie dit StackOverflow-antwoord )

<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

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

SVG
animatie

Zoeken…

Opmerkingen