Cómo agregar un borde doble a formas SVG

Digamos que alguien te pide que agregues un borde doble a algunas formas SVG geométricas aleatorias. Por alguna razón, no puedes usar ningún editor gráfico (deben generarse en tiempo de ejecución), por lo que debes resolverlo con CSS o dentro de la sintaxis SVG.

Su primera pregunta podría ser: ¿Hay algo parecido stroke-style: doubleen SVG? Bueno, la respuesta aún no está y no es tan fácil. Pero lo intentaré de todos los modos para ver qué métodos puedo descubrir. Exploraré las posibilidades de tres formas básicas diferentes: círculo, rectángulo y polígono. Señalando las que pueden mantener un color transparente en el medio de las dos líneas.

Alerta de spoiler: todos los resultados tienen sus desventajas, al menos con CSS y SVG, pero déjame explicarte mis intenciones.

Las soluciones simples

Estos no funcionan con todas las formas, pero son la solución más sencilla.

outlineybox-shadow

Las propiedades CSS outlinesolo box-shadowse aplican al cuadro delimitador de la forma o SVG, por lo que ambas son excelentes soluciones solo para cuadrados y rectángulos . También permiten colores flexibles utilizando propiedades personalizadas.

Solo se necesitan dos líneas de CSS outliney además mantiene el color de fondo visible a través de la forma.

• Solución solo para una forma.
• ✅ Código sencillo
• ✅ Los bordes son suaves
• ✅ Fondo transparente

box-shadowSolo necesita una línea de CSS, pero debemos asegurarnos de que cada forma tenga su propio SVG, ya que no podemos aplicarlo box-shadowdirectamente a las formas. Otra cosa a considerar es que tenemos que aplicar el color de fondo en la declaración.

• Solución solo para una forma
• ✅ Código sencillo
• ✅ Los bordes son suaves
• Sin fondo transparente

gradientes SVG

Los degradados radiales SVG solo funcionan en círculos ☺️. Podemos aplicar el degradado directamente en el trazo, pero es mejor usar variables ya que tenemos que declarar los colores muchas veces en el código.

• Solución solo para una forma
• ✅ Código sencillo
• Las fronteras son suaves
• Sin fondo transparente

Soluciones para todas las formas

Estos funcionarán con todas las formas, pero el código podría volverse inflado o complejo.

filter: drop-shadow()

¡Finalmente, una solución para todas las formas! Debemos tener cada forma en su propia forma svgya que filterno se aplica directamente a las formas. Estamos usando una declaración en CSS y tenemos colores flexibles usando variables. ¿La baja? Los bordes no parecen muy suaves.

• ✅ Una solución para todas las formas.
• ✅ Código sencillo
• Los bordes se ven pixelados
• Sin fondo transparente

filtros SVG

Esta es una solución muy flexible. Podemos crear un filtro y agregarlo a las formas a través del filteratributo de SVG. La parte complicada aquí es el filtro en sí. Necesitaremos tres pinturas, una para el borde exterior, otra para el fondo y la última para pintar la forma en el frente. El resultado se ve mejor que usando drop-shadow, pero los bordes aún están pixelados.

• ✅ Una solución para todas las formas.
• código complejo
• Los bordes se ven pixelados
• Sin fondo transparente

Reutilizar formas

Hay un par de opciones posibles aquí.

Opción 1: Transformaciones

Esta solución requiere transformaciones. Colocamos una figura sobre la otra, donde la figura principal tiene un color de relleno y un color de trazo, y la otra figura no tiene relleno, un trazo rojo, y se escala y se reposiciona hacia el centro. Definimos nuestras formas en el defs. El truco consiste en trasladar la mitad del viewBox espacio negativo para que, cuando los escalemos, podamos hacerlo desde el centro de la figura.

• ✅ Una solución para todas las formas.
• código duplicado
• ✅ Los bordes son suaves
• ✅ Fondo transparente

Opción 2:use

Encuentre una solución inteligente en la lista de correo www-svg de Doug Schepers que usa SVG use. Nuevamente, requiere definir las formas una vez y hacer referencia a ellas dos veces usando use. Esta vez la forma principal tiene un trazo más grande. La segunda forma tiene la mitad del trazo de la forma principal, sin relleno y un trazo que coincide con el color de fondo.

• ✅ Una solución para todas las formas.
• código duplicado
• ✅ Los bordes son suaves
• Sin fondo transparente

¡Aquí están los resultados completos!

Para que los tengas todos en un solo lugar. ¡Déjame saber que puedes pensar en otras posibles soluciones!

Solución	Todas las formas	código sencillo	Bordes suaves	fondo transparente
outline		✅	✅	✅
box-shadow		✅	✅
gradientes SVG		✅
filter:drop-shadow()	✅	✅
filtros SVG	✅
Reutilizar formas: transformar	✅		✅	✅
Reutilizando formas: use	✅		✅