Propiedades de SVG y CSS | Programar Plus

Hay muchos gráficos vectoriales escalables (SVG), pero solo se pueden aplicar ciertos atributos como CSS a SVG. Los atributos de presentación se utilizan para diseñar elementos SVG y se pueden utilizar como propiedades CSS. Algunos de estos atributos son solo SVG, mientras que otros ya están compartidos en CSS, como font-size o opacity.

Por ejemplo, para cambiar el color de un elemento a rojo, use el fill propiedad en CSS. El fill atributo es un atributo de presentación, por lo tanto, se puede utilizar como una propiedad CSS:

circle {
  fill: red;
}

Entonces, con eso, echemos un vistazo profundo y completo a todos los elementos SVG que están disponibles para nosotros, así como a las propiedades CSS para ellos. También veremos varios enfoques de estilo, incluidos estilos de presentación generales y animaciones.

Elementos SVG por categoría

Los atributos de presentación que se pueden utilizar como propiedades CSS se pueden encontrar a continuación. Como referencia, los elementos admitidos se clasificarán por categoría. Esto no incluye elementos obsoletos.

Propiedades compartidas entre CSS y SVG

Propiedades de fuente

Propiedades del texto

Propiedades de enmascaramiento

Propiedades de interactividad

Propiedades de color

Propiedades de visibilidad

Propiedades CSS de SVG

Propiedades del texto

Propiedades del clip

Propiedades de enmascaramiento

Efectos de filtro

Propiedades de degradado

Propiedades de interactividad

Propiedades de color

Propiedades de pintura

SVG 2

Si bien los atributos de presentación se pueden usar como propiedades CSS para diseñar SVG, ¿qué pasa con el control de las coordenadas y dimensiones de los elementos SVG usando CSS? SVG 2, que se encuentra en Recomendación Candidata en el momento de escribir este artículo, hace que sea posible diseñar y animar estas propiedades.

La especificación SVG 2 establece:

Algunas propiedades de estilo se pueden especificar no solo en hojas de estilo y atributos de ‘estilo’, sino también en atributos de presentación. Estos son atributos cuyo nombre coincide (o es similar a) una propiedad CSS determinada y cuyo valor se analiza como un valor de esa propiedad “.

No solo significa que las propiedades SVG se pueden diseñar usando CSS como atributos de presentación o en hojas de estilo, sino que esto también se puede aplicar a pseudoclases CSS como :hover o :active.

SVG 2 también presenta más atributos de presentación que se pueden usar como propiedades de estilo. Estos atributos se pueden encontrar en la especificación SVG 2.

Propiedades específicas del elemento

Es importante tener en cuenta que no todos los elementos SVG admitirán las mismas propiedades CSS. Al igual que existen propiedades CSS que se pueden aplicar a ciertos elementos SVG, existen propiedades específicas que son compatibles con ciertos elementos SVG.

Por ejemplo, los elementos o apoyan la cxy cypropiedades como coordenadas del centro de la forma. El elemento también es compatible con rx y ry properties como el radio, pero el elemento no puede usar estas propiedades.

Propiedades de geometría

En SVG 2, propiedades como rx y ry se definen como propiedades geométricas. Las propiedades de geometría se pueden usar como propiedades de CSS, al igual que los atributos de presentación, como fill o stroke propiedades. Estas propiedades CSS y los elementos SVG correspondientes incluyen:

Colocación de elementos SVG

SVG 2 también permite colocar elementos SVG usando CSS. Comencemos dibujando una forma de rectángulo que tenga el siguiente SVG:

<svg width="170" height="170">
  <rect x="10" y="10" width="150" height="150" />
</svg>

Y el siguiente CSS:

rect {
  fill: #6e40aa;
}

Esto producirá una forma de rectángulo con sus coordenadas establecidas en 10, 10. Con SVG 2, x y y se puede aplicar como propiedades CSS:

/* This will work with SVG 2 */
rect {
  x: 10;
  y: 10;
  ...
}

El código SVG se reduciría a esto:

<svg width="170" height="170">
  <rect width="150" height="150" />
</svg>

Incluso puede configurar el width y height Para el <rect> elemento usando CSS así:

rect {
  ...
  width: 150px;
  height: 150px;
  ...
}

Eso nos deja solo con lo siguiente para el marcado SVG:

<svg width="170" height="170">
  <rect />
</svg>

En el momento de escribir este artículo, las siguientes demostraciones funcionarán en los navegadores Blink (por ejemplo, Chrome y Opera) y WebKit (por ejemplo, Safari), ya que estos navegadores son compatibles con las funciones de SVG 2. Hasta entonces, profundicemos en cómo anular las propiedades de SVG usando CSS.

Transformación de forma SVG

El elemento se puede anular con CSS para crear cambios de forma.

Las rutas SVG que se transforman una en otra deben tener los mismos comandos y el mismo número de puntos o, de lo contrario, la transformación no funcionará.

Comencemos dibujando un elemento en forma de triángulo. Utilizando el d propiedad especificará la forma del elemento:

<svg height="220" width="300">
  <path d="M150 10 L40 200 L260 200Z" />
</svg>

Para que el triángulo adopte una forma diferente, anulemos el elemento SVG con el d propiedad con CSS:

path {
  d: path("M150, 10 L40, 200 L260, 200Z");
  fill: #4c6edb;
}

Agreguemos también un :active pseudo-clase a la propiedad, por lo que cuando se hace clic en el elemento, la forma se transforma en un cuadrado y cambia su fill color. Agreguemos también un transition propiedad para hacer que la acción de transformación de forma parezca suave. Aquí está el CSS:

path:active {
  d: path("M150, 10 L40, 200 L260, 200 L260, 200Z");
  fill: #4c6edb;
  transition: all 0.35s ease;
}

Y el SVG sería:

<svg height="220" width="300">
  <path />
</svg>

¿Quieres otra demostración? ¡Aquí hay una demostración genial de Chris Coyier que demuestra la transformación de la forma SVG al pasar el mouse!

Animando propiedades SVG

Las propiedades SVG se pueden animar usando CSS a través de animaciones y transiciones CSS.

En esta demostración, dibujaremos varios elementos SVG y crearemos una animación de onda. Empiece por dibujar cinco elementos:

<svg width="350" height="250">
  <circle class="shape" />
  <circle class="shape" />
  <circle class="shape" />
  <circle class="shape" />
  <circle class="shape" />
</svg>

Usaremos variables CSS y :nth-child() Pseudoclase CSS para definir cada uno .shape clase. El .shape la clase tendrá un cy de 50 y un r de 20. Cada uno de los .shape las clases tendrán las suyas propias cx y fill Conjunto de propiedades CSS:

:root {
  --color-1: #6e40aa;
  --color-2: #4c6edb;
  --color-3: #24aad8;
  --color-4: #1ac7c2;
  --color-5: #1ddea3;
}

.shape {
  cy: 50;
  r: 20;
}

.shape:nth-child(1) {
  cx: 60;
  fill: var(--color-1);
}

.shape:nth-child(2) {
  cx: 120;
  fill: var(--color-2);
}

.shape:nth-child(3) {
  cx: 180;
  fill: var(--color-3);
}

.shape:nth-child(4) {
  cx: 240;
  fill: var(--color-4);
}

.shape:nth-child(5) {
  cx: 300;
  fill: var(--color-5);
}

Así es como debería verse hasta ahora.

¡Ahora es el momento de animar! Empiece por usar @keyframes regla para definir el moveCircle animación:

@keyframes moveCircle {
  50% {
    cy: 150;
    r: 13;
  }
}

Esto hará que cada elemento cambie su cy coordenadas de 50 a 150 y r de 20 a 13. Agregue lo siguiente al CSS al .shape clase hace que la animación se ejecute infinitamente:

.shape {
  ...
  animation: moveCircle 1250ms ease-in-out both infinite;
}

Finalmente, agregue un animation-delay a cada uno de los .shape clases al CSS con la excepción de .shape:nth-child(1) como esto:

.shape:nth-child(2) {
  ...
  animation-delay: 100ms;
}

.shape:nth-child(3) {
  ...
  animation-delay: 200ms;
}

.shape:nth-child(4) {
  ...
  animation-delay: 300ms;
}

.shape:nth-child(5) {
  ...
  animation-delay: 400ms;
}

Formas en SVG <pattern> Los elementos también se pueden animar usando CSS. ¡Aquí hay una demostración genial de Dudley Storey que lo muestra!

Terminando

Como SVG 1.1 es el estándar actual, pocos navegadores admiten actualmente las funciones de SVG 2. No se recomienda poner en producción estas técnicas todavía. La implementación de SVG 2 se encuentra actualmente en la etapa de recomendación candidata, por lo que la compatibilidad con el estilo de las propiedades geométricas de SVG con CSS debería mejorar en el futuro.