Я создал собственный фильтр SVG, который использует фоновое изображение в качестве источника. Затем он применяет к нему карту случайного смещения, чтобы имитировать оптическое искажение (например, каустика воды, деформация от горячего, протекающего воздуха), что мне очень нравится.
Он правильно отображается в Inkscape, но не в Internet Explorer 10 и Chrome. По-видимому, использование фонового изображения в качестве входных данных для фильтра — малоизвестная функция, которую некоторые средства визуализации SVG могут не поддерживать. Мне также пришлось установить enable-background=new в одном из слоев SVG, чтобы даже Inkscape отображал его правильно. Кто-нибудь знает, какие веб-браузеры или свободно доступные автономные программы (кроме Inkscape) могут правильно отображать такие изображения?
Кроме того, может ли кто-нибудь прокомментировать, почему эта функция не поддерживается должным образом (она не кажется более сложной, чем простая прозрачность). Кроме того, есть ли какие-либо разумные обходные пути для достижения того же эффекта?
Я прикрепил пример ниже (вы должны увидеть звезду с искаженной фильтром нижней половиной).
Ссылка на живое изображение SVG на 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>
