SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
La primitiva de filtro SVG <feDisplacementMap> se usa para desplazar espacialmente el contenido de la imagen usando un mapa de desplazamiento. Se necesitan dos entradas para producir un resultado. El contenido de la imagen a desplazar se especifica en el atributo “in2” . El contenido al que se le aplica el efecto de desplazamiento se reserva en el atributo “in” .
Sintaxis:
<feDisplacementMap in2="" in="" scale=""
xChannelSelector="" yChannelSelector=""/>
Atributos:
- in : identifica la entrada para la primitiva de filtro dada.
- in2 : identifica la segunda entrada para la primitiva de filtro dada. Funciona exactamente como el atributo in.
- scale – Define el factor de escala de desplazamiento a utilizar en una primitiva de filtro <feDisplacementMap>.
- xChannelSelector: indica qué canal de color de in2 se usa para desplazar los píxeles en ‘in’ a lo largo del eje x.
- yChannelSelector : indica qué canal de color de in2 se usa para desplazar los píxeles en ‘in’ a lo largo del eje y.
Ejemplo 1:
<!DOCTYPE html> <html> <body> <svg width="200" height="200" viewBox="0 0 220 220"> <filter id="displacementFilter"> <feTurbulence type="turbulence" baseFrequency="1" numOctaves="2" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="B" /> </filter> <circle cx="100" cy="100" r="100" stroke="green" style= "filter: url(#displacementFilter)" /> </svg> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html> <body> <svg width="200" height="200" viewBox="0 0 220 220"> <filter id="displacementFilter"> <feTurbulence type="turbulence" baseFrequency="5" numOctaves="2" result="turbulence" /> <feDisplacementMap in2="abc" in="SourceGraphic" scale="200" xChannelSelector="B" yChannelSelector="R" /> </filter> <rect width="250" height="250" style ="filter: url(#displacementFilter)" /> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por epistler_999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA