Question

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>

Answer 1

Firefox实现了Filter Effects规范的security features。

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

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

feDisplacementMap似乎无法在Firefox

1 个答案: