Estoy tratando de usar filtros svg para agregar un mapa de desplazamiento a una imagen. Este es mi código:
<svg width="300" height="300"> <filter id="a" filterUnits="userSpaceOnUse" x="0" y="0" width="300" height="300"> <feImage xlink:href="https://i.imgur.com/TKNyL9Q.jpg" result="heatmap"/> <feDisplacementMap scale="15" xChannelSelector="R" yChannelSelector="G" in2="heatmap" in="SourceGraphic"/> </filter> <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="300" width="300" filter="url(#a)" /> </svg>Se supone que esto toma la imagen del beagle y le aplica un mapa de desplazamiento de cuadrícula, pero no tiene ningún efecto.
Curiosamente, cambiar con in2 in la etiqueta <feDisplacementMap> funciona, pero al revés muestra una imagen de cuadrícula con un mapa beagle bien.
Aquí hay un ejemplo de codepen .
¿Por qué solo funciona de una manera?
parece que los parámetros in e in2 deben coincidir con el gráfico de origen en sí, no con el .heatmap.
Modifiqué el primero: 'Beagle con filtro de mapa de calor' a esto:
<feDisplacementMap scale="15" xChannelSelector="R" yChannelSelector="G" in2="SourceGraphic" in="SourceGraphic"/><!-- --> </filter>Déjame saber si este es el resultado que estabas buscando.