SVG desenfoque - desenfoque gaussiano
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 <feGaussianBlur>
Ejemplo 1
<FeGaussianBlur> se utiliza para crear un efecto de desenfoque:
Aquí está el código SVG:
Ejemplos
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</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
- <FeGaussianBlur> define la falta de definición
- en = "SourceGraphic" Esta sección define el efecto creado por la imagen completa
- stdDeviation atributo define la cantidad de desenfoque
- Filtrar <rect> se utiliza para vincular los elementos de filtro "F1"