SVG => Animación

Observaciones

La animación SMIL a través del elemento <animate> se admite actualmente (julio de 2016) en los principales navegadores, con la excepción de los navegadores de Microsoft. Hay una biblioteca (fakeSMIL) que se puede usar como polyfill para la compatibilidad de Microsoft.

Chrome 45 dejó de usar SMIL en favor de las animaciones CSS y la próxima sintaxis de animación declarativa de animaciones web, que desafortunadamente, solo se implementa parcialmente en los navegadores actuales. Pero los desarrolladores de Chrome suspendieron recientemente su intención (consulte esta respuesta de 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

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

SVG
Animación

Buscar..

Observaciones