Sombras paralelas SVG

<defs> y <filtro>

Todos los filtros SVG se definen dentro de un elemento <defs>. El elemento <defs> es la abreviatura de definiciones y contiene definiciones de elementos especiales (como filtros).

El elemento <filter> se utiliza para definir un filtro SVG. El elemento <filter> tiene un atributo de id obligatorio que identifica el filtro. El gráfico luego apunta al filtro a usar.

SVG <feOffset>

Ejemplo 1

El elemento <feOffset> se utiliza para crear efectos de sombra paralela. La idea es tomar un gráfico SVG (imagen o elemento) y moverlo un poco en el plano xy.

El primer ejemplo compensa un rectángulo (con <feOffset>), luego fusiona el original sobre la imagen compensada (con <feBlend>):

Aquí está el código SVG:

Explicación del código:

• El atributo id del elemento <filter> define un nombre único para el filtro
• El atributo de filtro del elemento <rect> vincula el elemento al filtro "f1"

Ejemplo 2

Ahora, la imagen desplazada se puede desenfocar (con <feGaussianBlur>):

Aquí está el código SVG:

Explicación del código:

• El atributo stdDeviation del elemento <feGaussianBlur> define la cantidad de desenfoque

Ejemplo 3

Ahora, haz la sombra negra:

Aquí está el código SVG:

Explicación del código:

• El atributo de entrada del elemento <feOffset> se cambia a "SourceAlpha", que usa el canal alfa para el desenfoque en lugar de todo el píxel RGBA

Ejemplo 4

Ahora, trata la sombra como un color:

Aquí está el código SVG:

Explicación del código:

• El filtro <feColorMatrix> se utiliza para transformar los colores de la imagen desplazada más cerca del negro. Los tres valores de '0.2' en la matriz se multiplican por los canales rojo, verde y azul. Reducir sus valores acerca los colores al negro (el negro es 0)