Pregunta
I have created a custom SVG filter which uses the background image as the source. It then applies a random displacement map to it to simulate an optical distortion (e.g. water caustics, warping from hot, flowing air), which I really like.
It renders correctly in Inkscape, but not in Internet Explorer 10 nor Chrome. Apparently, using the background image as a filter input is an obscure feature that some SVG renderers might not support. I also had to set enable-background=new in one of the SVG layers for even Inkscape to show it correctly. Does anyone know which web browsers or freely available standalone programs (besides Inkscape) can correctly display such images?
Also, can someone comment on why this feature doesn't seem to be well supported (it doesn't seem more complicated than a simple transparency). Also, are there any reasonable work arounds to achieve the same effect?
I've attached an example below (you should see a star with the bottom half distorted by the filter).
Link to live SVG image on JSBin
https://stackoverflow.com/questions/15301391
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<?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>
Solución
Only Opera (and IE10) supports background image as a filter input. (And btw, Safari ignores color-interpolation-filters). It's apparently pretty complicated to support this - there is a long disucssion on the W3C mailing list (which I can't quite follow) on enabling backgrounds for next gen filters.
The workaround is to pull in the background image via an feImage - although it may not be exactly what you're looking for.
