Cómo usar CSS para modificar el origen SVG y crear animaciones SVG

Los elementos SVG se pueden animar como elementos HTML, usando fotogramas clave CSS y propiedades de animación o transiciones CSS.

Los elementos SVG se pueden animar de diversas formas, al igual que los elementos HTML, utilizando fotogramas clave CSS y propiedades de animación o transiciones CSS.

En la mayoría de los casos, las animaciones complejas requieren una combinación de transformaciones: rotación, inclinación, escala y sus transiciones y transiciones. En la mayoría de los casos, los elementos SVG y los elementos HTML son idénticos en el uso de transformaciones y orígenes de transformaciones. Sin embargo, existen diferencias entre ellos; un elemento SVG no se puede administrar utilizando el modelo de caja, por lo que no tiene márgenes, relleno, bordes ni cuadros de contenido.

De forma predeterminada, el origen de transformación de un elemento HTML se encuentra en (50, 50) del elemento, que es el punto central del elemento. Por el contrario, el origen de la transformación de un elemento SVG es el origen del sistema de coordenadas del usuario actual, que es la esquina superior izquierda del lienzo.

Supongamos que tenemos un elemento lt;divgt; y un elemento SVG lt;rectgt;:

lt;!DOCTYPE htmlgt;