SVG Las sombras paralelas

<Defs> y <filtro>

Todos los filtros SVG se definen dentro de un <defs> elemento. La <defs> elemento es la abreviatura de las definiciones y contiene la definición de los elementos especiales (such as filters) .

El <filter> elemento se utiliza para definir un filtro SVG. El <filter> elemento tiene un atributo id requerido que identifica el filtro. El gráfico a continuación, apunta a que utilice el filtro.

SVG <feOffset>

Ejemplo 1

La <feOffset> elemento se utiliza para crear efectos de sombra. La idea es hacer un gráfico SVG (image or element) y moverlo un poco en el plano xy.

El primer ejemplo compensa un rectángulo (with <feOffset>) , a continuación, mezclar el original encima de la imagen de desplazamiento (with <feBlend>) :

Aquí está el código SVG:

Code explanation:

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

Ejemplo 2

Ahora, el descentramiento de la imagen puede ser borrosa (with <feGaussianBlur>) :

Aquí está el código SVG:

Code explanation:

• El stdDeviation atributo de la <feGaussianBlur> elemento define el importe de la falta de definición

Ejemplo 3

Ahora, hacer que el negro sombra:

Aquí está el código SVG:

Code explanation:

• El in atributo de la <feOffset> elemento se cambia a "SourceAlpha" que utiliza el canal alfa de la falta de definición en lugar de todo el píxel RGBA

Ejemplo 4

Ahora, el tratamiento de la sombra como un color:

Aquí está el código SVG:

Code explanation:

• La <feColorMatrix> filtro se utiliza para transformar los colores de la imagen de desplazamiento más cerca de negro. Los tres valores de '0.2' en la matriz de todo se multiplican por los canales rojo, verde y azul. La reducción de sus valores trae los colores más cerca de negro (black is 0)