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 elementoElementos
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ónElementos soportados
fontElementos de contenido de texto
font-familyElementos de contenido de texto
font-sizeElementos de contenido de texto
font-size-adjustElementos de contenido de texto
font-stretchElementos de contenido de texto
font-styleElementos de contenido de texto
font-variantElementos de contenido de texto
font-weightElementos de contenido de texto

Propiedades del texto

Atributo de presentaciónElementos soportados
direction<text>
<tspan>
letter-spacingElementos de contenido de texto
text-decorationElementos de contenido de texto
unicode-bidiElementos de contenido de texto
word-spacingElementos de contenido de texto
writing-mode<text>

Propiedades de enmascaramiento

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

Propiedades de interactividad

Atributo de presentaciónElementos soportados
cursorElementos de contenedor
Elementos graficos

Propiedades de color

Atributo de presentaciónElementos soportados
colorSe aplica a los elementos que utilizan:
fill
stroke
stop-color
flood-color
lighting-color

Propiedades de visibilidad

Atributo de presentaciónElementos soportados
displayElementos graficos
Elementos de contenido de texto
<a>
<foreignObject>
<g>
<svg>
<switch>
visibilityElementos graficos
Elementos de contenido de texto

Propiedades CSS de SVG

Propiedades del texto

Atributo de presentaciónElementos soportados
alignment-baseline<textPath>
<tspan>
baseline-shift<textPath>
<tspan>
dominant-baselineElementos de contenido de texto
glyph-orientation-horizontalElementos de contenido de texto
glyph-orientation-verticalElementos de contenido de texto
kerningElementos de contenido de texto
text-anchorElementos de contenido de texto

Propiedades del clip

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

Propiedades de enmascaramiento

Atributo de presentaciónElementos soportados
maskElementos de contenedor
Elementos graficos
opacityElementos graficos
<a>
<defs>
<g>
<marker>
<pattern>
<svg>
<switch>
<symbol>

Efectos de filtro

Atributo de presentaciónElementos soportados
enable-backgroundElementos de contenedor
filterElementos de contenedor
Elementos graficos
flood-color<feFlood>
flood-opacity<feFlood>
lighting-color<feDiffuseLighting>
<feSpecularLighting>

Propiedades de degradado

Atributo de presentaciónElementos soportados
stop-color<stop>
stop-opacity<stop>

Propiedades de interactividad

Atributo de presentaciónElementos soportados
pointer-eventsElementos graficos

Propiedades de color

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

Propiedades de pintura

Atributo de presentaciónElementos soportados
color-interpolationElementos de contenedor
Elementos graficos
color-interpolation-filtersFiltrar elementos primitivos
color-renderingElementos de contenedor
Elementos graficos
fillElementos de forma
Elementos de contenido de texto
fill-ruleElementos de forma
Elementos de contenido de texto
fill-opacityElementos 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-renderingElementos de forma
strokeElementos de forma
Elementos de contenido de texto
stroke-dasharrayElementos de forma
Elementos de contenido de texto
stroke-dashoffsetElementos de forma
Elementos de contenido de texto
stroke-linecapElementos de forma
Elementos de contenido de texto
stroke-linejoinElementos de forma
Elementos de contenido de texto
stroke-miterlimitElementos de forma
Elementos de contenido de texto
stroke-opacityElementos de forma
Elementos de contenido de texto
stroke-widthElementos 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 SVGPropiedad 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 5 times, 1 visits today)