El atributo de filtro se utiliza para especificar los efectos de filtro definidos por el elemento <filter> que se aplicarán a sus elementos.
Sintaxis:
filter="value"
Valores de atributos:
- valor: los valores de filtro que se aplicarán al elemento
Usaremos el atributo de filtro para configurar el filtro de los elementos.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"> <filter id="fil"> <!--Using GaussianBlur filter effect--> <feGaussianBlur stdDeviation="5" /> </filter> <rect x="80" y="30" width="200" height="200" filter="url(#fil)" /> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <!--> Using GaussianBlur filter effect<---> <feGaussianBlur stdDeviation="5" /> </filter> <rect x="80" y="30" width="200" height="200" filter="url(#blur)" fill="green" /> </svg> </body> </html>
Producción:
