El elemento SVG <filter> se utiliza para definir filtros. Para identificar de forma única el uso del filtro id. Los filtros se definen en elementos de definición.
Sintaxis:
<filter filterUnits="units to define filter effect region" primitiveUnits="units to define primitive filter subregion" x="x-axis co-ordinate" y="y-axis co-ordinate" width="length" height="length" filterRes="numbers for filter region" xlink:href="reference to another filter" > </filter>
Hay algunos filtros proporcionados por el SVG.
A continuación se muestra la lista de los filtros más utilizados.
- feBlend
- feColorMatrix
- feComponentTransfer
- feCompuesto
- feConvolveMatrix
- feDiffuseIluminación
- feDisplacementMap
- Inundación
- feGaussianBlur
- feImagen
- fusionar
- feMorfología
- feOffset – filtro para sombras paralelas
- feSpecularIluminación
- fetil
- feTurbulencia
- feDistantLight
- fePointLight
- feSpotLight
Atributos:
- filterUnits: unidades para definir la región de impacto del filtro. Especifica el sistema de coordenadas para los valores de longitud variados dentro del filtro y para los atributos que definen la subregión del filtro.
- nativeUnits: unidades para definir la región de impacto del filtro. Especifica el sistema de coordenadas para los valores de longitud variados dentro del filtro y para los atributos que definen la subregión del filtro.
- x: eje x del cuadro delimitador del filtro.
- y: eje y del cuadro delimitador del filtro.
- ancho: ancho del cuadro delimitador.
- Altura: altura del cuadro delimitador.
- filterRes: número de la región del filtro.
- xlink:href: se refiere a otro filtro.
Ejemplo:
<html> <title>SVG Filter</title> <body> <svg width="400" height="400"> <defs> <filter id="filter2" x="0" y="0" width="150%" height="150%"> <feOffset result="offOut" dx="30" dy="30" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <g> <rect x="50" y="50" width="150" height="150" fill="gray" filter="url(#filter2)" /> </g> </svg> </body> </html>
Producción:
Ejemplo: forma diferente y sombra personalizada.
<html> <title>SVG Filter</title> <body> <svg width="400" height="400"> <defs> <filter id="filter2" x="0" y="0" width="150%" height="150%"> <feOffset result="offOut" dx="30" dy="30" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <g> <circle cx="80" cy="80" r="50" stroke="black" stroke-width="2" fill="green" filter="url(#filter2)" /> </g> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA