Question

我创建了一个自定义SVG过滤器，它使用背景图像作为源。然后它应用一个随机置换贴图来模拟光学畸变（例如水焦散，从热的流动空气翘曲），我非常喜欢。

它在Inkscape中正确呈现，但在Internet Explorer 10和Chrome中都没有。显然，使用背景图像作为过滤器输入是一些不起眼的功能，某些SVG渲染器可能不支持。我还必须在其中一个SVG图层中设置enable-background = new，即使是Inkscape也能正确显示它。有谁知道哪些网络浏览器或免费提供的独立程序（除了Inkscape）可以正确显示这些图像？

此外，有人可以评论为什么这个功能似乎没有得到很好的支持（它似乎并不比简单的透明度复杂）。另外，有没有合理的工作来达到同样的效果？

我在下面附上了一个例子（你应该看到一个明星的下半部分被过滤器扭曲了。）

Link to live SVG image on JSBin

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg1380" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"     style="enable-background:new" xmlns="http://www.w3.org/2000/svg" height="190" width="367" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs id="defs1382">
<filter id="filter1945" style="color-interpolation-filters:sRGB">
<feTurbulence id="feTurbulence1947" baseFrequency="0.034000000000000009" seed="397" result="turbulence" numOctaves="4" type="turbulence"/>
<feDisplacementMap id="feDisplacementMap1949" scale="100" yChannelSelector="G" in2="turbulence" xChannelSelector="R" in="BackgroundImage"/>
</filter>
<radialGradient id="radialGradient5645" gradientUnits="userSpaceOnUse" cy="402" cx="359" gradientTransform="matrix(.0557 -.0464 .178 .207 268 339)" r="417">
<stop id="stop5641" stop-color="#fee" offset="0"/>
<stop id="stop5643" stop-color="#fee" stop-opacity="0" offset="1"/>
</radialGradient>
<radialGradient id="radialGradient5653" gradientUnits="userSpaceOnUse" cy="407" cx="248" gradientTransform="matrix(.537 -.681 .793 .625 -234 -28)" r="47.2">
<stop id="stop5649" stop-color="#f00" offset="0"/>
<stop id="stop5651" stop-color="#784421" offset="1"/>
</radialGradient>
</defs>
<metadata id="metadata1385">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g fill-rule="evenodd">
<rect id="rect5726" height="135" width="339" y="0" x="27.9"/>
<path id="path5635" opacity=".998" d="m266 80-36-6-18 31-5-35.4-36-7.5 33-16.1-4-35.9 25 25.8 33-14.8-17 32.1z" fill="url(#radialGradient5653)"/>
<rect id="rect1935" transform="matrix(.435 0 .0110 .656 32.9 -151)" height="189" filter="url(#filter1945)" width="694" y="313" x="-13.6" fill="url(#radialGradient5645)"/>
</g>
</svg>

Answer 1

只有Opera（和IE10）支持背景图像作为过滤器输入。（顺便说一下，Safari忽略了颜色插值滤镜）。支持这一点显然非常复杂 - 在为下一代过滤器启用背景的W3C邮件列表（我不能完全遵循）上有很长的讨论。

解决方法是通过feImage拉入背景图片 - 虽然它可能不是您正在寻找的。

哪些Web浏览器支持以后台为源的SVG过滤？合理的工作？

1 个答案: