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.

(Visited 7 times, 1 visits today)