feDisplacementMap 似乎在 Firefox 中不起作用答案

【问题标题】：feDisplacementMap seemingly not working in FirefoxfeDisplacementMap 似乎在 Firefox 中不起作用
【发布时间】：2015-10-17 12:51:52
【问题描述】：

Firefox 不支持 .png 作为置换贴图输入吗？这在其他浏览器中有效，我不确定我做错了什么。

<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>

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

Firefox 实现了滤镜效果规范的security features。

您的 feImage 指向跨域的东西，这会污染过滤器。如果您将 feDisplacementMap 过滤器应用于受污染的输出，那么它将充当通过过滤器，这正是您在此处看到的。

如果我将过滤器位图复制到我的 PC 本地，那么过滤器将按预期工作。

【讨论】：