Search code examples
svgsvg-filters

feDisplacementMap seemingly not working in Firefox


Does Firefox not support .png's as displacement map inputs? This is working in other browsers and I'm not sure what I'm doing wrong.

<svg x="0px" y="0px" width="810px" height="600px" viewBox="0 0 810 600">
  <defs>
    <filter id="pixelate" x="0%" y="0%" width="100%" height="100%" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
   		<feImage x="0" y="0" width="15" height="15" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32648/pixelate-map-5.png" result="dis-map"/> 
         <feTile in="dis-map" result="pixelate-map" />
		 <feDisplacementMap in="SourceGraphic" in2="pixelate-map" xChannelSelector="R" yChannelSelector="G" scale="40" result="pre-final"/>
		 </filter>
  </defs>

<image filter="url(#pixelate)" width="810" height="600" preserveAspectRatio="xMidYMid meet" xlink:href="http://uploads2.wikiart.org/images/vincent-van-gogh/the-starry-night-1889(1).jpg"/>
</svg>


Solution

  • Firefox implements the security features of the Filter Effects specification.

    Your feImage points to something cross-domain, this taints the filter. If you apply an feDisplacementMap filter to tainted output then it acts as a pass through filter which is exactly what you're seeing here.

    If I copy the filter bitmap so it's local to my PC then the filter works as expected.