我创建了一个自定义 SVG 过滤器，它使用背景图像作为源。然后它应用一个随机置换贴图来模拟我非常喜欢的光学失真（例如水焦散、热流动空气的翘曲）。
它在 Inkscape 中正确呈现，但在 Internet Explorer 10 和 Chrome 中均不正确。显然，使用背景图像作为过滤器输入是一个模糊的功能，一些 SVG 渲染器可能不支持，因为缓冲中间图像需要额外的内存。我还必须在其中一个 SVG 图层中设置 enable-background=new ，以便 Inkscape 正确显示它。有谁知道哪些网络浏览器或免费提供的独立程序（Inkscape 除外）可以正确显示此类图像？
我在下面附上了一个例子（你应该看到一个下半部分被过滤器扭曲的星星）。
<?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>