sombra SVG
Nota: Internet Explorer y Safari no soporta filtros SVG!
<Def> y <filtro>
SVG filtra todo a Internet definido en el elemento <defs>. <Def> define corto y contiene elementos especiales (tales como filtros) definición.
<Filtro> etiqueta se utiliza para definir el filtro SVG. <Filtro> con el atributo id requerido para definir la aplicación gráfica que filtra?
SVG <feOffset>
Ejemplo 1
<FeOffset> se utiliza para crear un efecto de sombra. La idea es tomar unos gráficos SVG (o elementos de imagen) y moverlo un poco en el plano xy.
El primer ejemplo compensado un rectángulo (con <feOffset>), y luego se mezcla la parte superior de desplazamiento de la imagen (incluyendo <feBlend>):
Aquí está el código SVG:
Ejemplos
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Trate »
Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).
análisis de código:
- El único nombre <filtro> atributo ID de elemento define un filtro
- Filtrar <rect> se utiliza para vincular los elementos de filtro "F1"
Ejemplo 2
Ahora, se puede desplazar la imagen se vuelve borrosa (que contiene <feGaussianBlur>):
Aquí está el código SVG:
Ejemplos
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Trate »
Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).
análisis de código:
- stdDeviation <feGaussianBlur> Propiedad elemento define la cantidad de desenfoque
Ejemplo 3
Ahora haga una sombra negro:
Aquí está el código SVG:
Ejemplos
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Trate »
Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).
análisis de código:
- Propiedades <feOffset> para "SourceAlpha" uso de desenfoque en el canal alfa, en lugar de la totalidad de los píxeles RGBA.
Ejemplo 4
Sombra está recubierto con un color:
Aquí está el código SVG:
Ejemplos
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Trate »
Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).
análisis de código:
- Filtro <FeColorMatrix> Offset se utiliza para convertir una imagen para que sea más cercano al color negro. '0.2' para obtener tres valores se multiplican por una matriz de canales de color rojo, verde y azul. La reducción de su valor para traer color a negro (negro es 0)