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.

Tipo de elemento	Elementos
Elementos de contenedor	<a> <defs> <g> <marker> <mask> <pattern> <svg> <switch> <symbol>
Filtrar elementos primitivos	<feBlend> <feColorMatrix> <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> <feSpecularLighting> <feTile> <feTurbulence>
Elementos degradados	<linearGradient> <radialGradient> <stop>
Elementos graficos	<circle> <ellipse> <image> <line> <path> <polygon> <polyline> <rect> <text> <use>
Elementos de forma	<circle> <ellipse> <line> <path> <polygon> <polyline> <rect>
Elementos de contenido de texto	<text> <textPath> <tspan>

Propiedades compartidas entre CSS y SVG

Propiedades de fuente

Atributo de presentación	Elementos soportados
font	Elementos de contenido de texto
font-family	Elementos de contenido de texto
font-size	Elementos de contenido de texto
font-size-adjust	Elementos de contenido de texto
font-stretch	Elementos de contenido de texto
font-style	Elementos de contenido de texto
font-variant	Elementos de contenido de texto
font-weight	Elementos de contenido de texto

Propiedades del texto

Atributo de presentación	Elementos soportados
direction	<text> <tspan>
letter-spacing	Elementos de contenido de texto
text-decoration	Elementos de contenido de texto
unicode-bidi	Elementos de contenido de texto
word-spacing	Elementos de contenido de texto
writing-mode	<text>

Propiedades de enmascaramiento

Atributo de presentación	Elementos soportados
overflow	<foreignObject> <image> <marker> <pattern> <svg> <symbol>

Propiedades de interactividad

Atributo de presentación	Elementos soportados
cursor	Elementos de contenedor Elementos graficos

Propiedades de color

Atributo de presentación	Elementos soportados
color	Se aplica a los elementos que utilizan: fill stroke stop-color flood-color lighting-color

Propiedades de visibilidad

Atributo de presentación	Elementos soportados
display	Elementos graficos Elementos de contenido de texto <a> <foreignObject> <g> <svg> <switch>
visibility	Elementos graficos Elementos de contenido de texto

Propiedades CSS de SVG

Propiedades del texto

Atributo de presentación	Elementos soportados
alignment-baseline	<textPath> <tspan>
baseline-shift	<textPath> <tspan>
dominant-baseline	Elementos de contenido de texto
glyph-orientation-horizontal	Elementos de contenido de texto
glyph-orientation-vertical	Elementos de contenido de texto
kerning	Elementos de contenido de texto
text-anchor	Elementos de contenido de texto

Propiedades del clip

Atributo de presentación	Elementos soportados
clip	<foreignObject> <image> <marker> <pattern> <svg> <symbol>
clip-path	Elementos de contenedor Elementos graficos
clip-rule	<clipPath>

Propiedades de enmascaramiento

Atributo de presentación	Elementos soportados
mask	Elementos de contenedor Elementos graficos
opacity	Elementos graficos <a> <defs> <g> <marker> <pattern> <svg> <switch> <symbol>

Efectos de filtro

Atributo de presentación	Elementos soportados
enable-background	Elementos de contenedor
filter	Elementos de contenedor Elementos graficos
flood-color	<feFlood>
flood-opacity	<feFlood>
lighting-color	<feDiffuseLighting> <feSpecularLighting>

Propiedades de degradado

Atributo de presentación	Elementos soportados
stop-color	<stop>
stop-opacity	<stop>

Propiedades de interactividad

Atributo de presentación	Elementos soportados
pointer-events	Elementos graficos

Propiedades de color

Atributo de presentación	Elementos soportados
color-profile	<image> refiriéndose a la imagen rasterizada

Propiedades de pintura

Atributo de presentación	Elementos soportados
color-interpolation	Elementos de contenedor Elementos graficos
color-interpolation-filters	Filtrar elementos primitivos
color-rendering	Elementos de contenedor Elementos graficos
fill	Elementos de forma Elementos de contenido de texto
fill-rule	Elementos de forma Elementos de contenido de texto
fill-opacity	Elementos de forma Elementos de contenido de texto
image-rendering	<image>
marker	<line> <path> <polygon> <polyline>
marker-start	<line> <path> <polygon> <polyline>
marker-mid	<line> <path> <polygon> <polyline>
marker-end	<line> <path> <polygon> <polyline>
shape-rendering	Elementos de forma
stroke	Elementos de forma Elementos de contenido de texto
stroke-dasharray	Elementos de forma Elementos de contenido de texto
stroke-dashoffset	Elementos de forma Elementos de contenido de texto
stroke-linecap	Elementos de forma Elementos de contenido de texto
stroke-linejoin	Elementos de forma Elementos de contenido de texto
stroke-miterlimit	Elementos de forma Elementos de contenido de texto
stroke-opacity	Elementos de forma Elementos de contenido de texto
stroke-width	Elementos de forma Elementos de contenido de texto
text-rendering	<text>

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:

Elemento SVG	Propiedad de geometría
<circle>	cx cy r
<ellipse>	cx cy rx ry
<rect>	rx ry height width x y
<path>	path
<image>	height width x y
<foreignObject>	height width x y
<svg>	height width x y

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.