SVG significa Gráficos vectoriales escalables. Define gráficos y animaciones basados en vectores como en HTML Canvas.
El elemento animateTransform anima un atributo de transformación en su elemento de destino, lo que permite que las animaciones controlen la traducción, el escalado, la rotación o el sesgo.
Sintaxis:
<animateTransform attributeName=''transform''/>
Atributo:
- from: Valor inicial del atributo que será modificado durante la animación.
- to: Valor final del atributo que será modificado durante la animación.
- tipo: Define el tipo de transformación, cuyos valores cambian con el tiempo.
- dur: Duración de la animación.
- repeatCount: el número de veces que tendrá lugar una animación.
- repeatDur: La duración total para repetir una animación.
- atributoName: el nombre de la propiedad CSS que se va a animar.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <svg width="120" height="120"> <polygon points="60,30 90,90 30,90"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite" /> </polygon> </svg> </body> </html>
Navegadores compatibles:
- Cromo
- Borde
- Firefox
- Safari
- Ópera