哪些网页浏览器支持使用previous层作为源过滤SVG？ [英] Which web browsers support SVG filtering with a previous layer as the source?

问题描述

我创建了使用的背景图片来源自定义SVG滤镜。然后，它采用随机置换贴图给它模拟一个光学畸变（例如水腐蚀剂，从热变形，流动的空气），我真的很喜欢。

它正确地呈现在Inkscape中，而不是在Internet Explorer 10浏览器也没有。显然，使用背景图像作为滤波器输入是一个不起眼的功能，一些SVG渲染器可能不支持，由于缓冲中间图像所需的额外内存。我也不得不设置使背景=新的SVG一层甚至Inkscape中正确显示它。有谁知道它的网络浏览器或免费提供的独立程序（除了Inkscape中），可以正确显示这些图像？

我附在下面的例子（你应该看到通过过滤器的一半扭曲底部的星）。

链接到JSBin 住SVG图像

 ＆LT;？XML版本=1.0编码=UTF-8独立=无＆GT？;
＆LT;！ - 创建使用Inkscape（http://www.inkscape.org/） -  GT;
＆LT; SVG ID =svg1380的xmlns：RDF =htt​​p://www.w3.org/1999/02/22-rdf-syntax-ns#的风格=启用背景：新的xmlns =HTTP： //www.w3.org/2000/svgHEIGHT =190WIDTH =367版本=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/＆GT;
＆所述; DEFS ID =defs1382＆GT;
＆LT;过滤器ID =filter1945的风格=色彩插值滤波器：sRGB的＆GT;
＆LT; feTurbulence ID =feTurbulence1947baseFrequency =0.034000000000000009种子=397的结果=动荡numOctaves =4TYPE =动荡/＆GT;
＆LT; feDisplacementMap ID =feDisplacementMap1949规模=100yChannelSelector =GIN2 = =中的BackgroundImage/＆GT动荡xChannelSelector =R;
＆LT; /滤光器＆gt;
＆LT;的RadialGradient ID =radialGradient5645gradientUnits =userSpaceOnUseCY =402CX =359gradientTransform =矩阵（0.0557 -.0464 0.178 0.207 268 339）R =417＆GT;
＆LT;停止ID =stop5641停止色=＃费偏移量=0/＆GT;
＆LT;停止ID =stop5643停止色=＃费停不透明度= OFFSET =1/＆GT0;
＆LT; /＆的RadialGradient GT;
＆LT;的RadialGradient ID =radialGradient5653gradientUnits =userSpaceOnUseCY =407CX =248gradientTransform =矩阵（0.537 -.681 0.793 .625 -234 -28）R =47.2＆GT;
＆LT;停止ID =stop5649停止色=＃F00偏移量=0/＆GT;
＆LT;停止ID =stop5651停止色=＃784421偏移量=1/＆GT;
＆LT; /＆的RadialGradient GT;
＆LT; / DEFS＆GT;
＆LT;元数据ID =metadata1385＆GT;
＆LT; RDF：RDF＆GT;
＆LT; CC：工作的rdf：about =＆GT;
＆LT; D​​C：格式＆gt;图像/ SVG + XML＆LT; / DC：格式＆gt;
＆LT; D​​C：类型RDF：资源=htt​​p://purl.org/dc/dcmitype/StillImage/＆GT;
＆LT; D​​C：标题/＆GT;
＆LT; /立方厘米：工作＆GT;
＆LT; / RDF：RDF＆GT;
＆LT; /元＆GT;
＆LT克填充规则=EVENODD＆GT;
＆所述;矩形的id =rect5726高度=135​​的宽度=339Y =0×=27.9/＆GT;
＆LT;998路径ID =path5635不透明度= 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 补=URL（＃radialGradient5653）/＆GT;
＆LT; RECT ID =rect1935改造=矩阵（0.435 0 0.0110 0.656 32.9 -151）HEIGHT =189过滤器=URL（＃filter1945）WIDTH =694Y =313× = -  13.6补=URL（＃radialGradient5645）/＆GT;
＆所述; / g取代;
＆LT; / SVG＆GT;
 

解决方案

背景图像仅由Opera和IE10支持现在作为一个过滤器的输入，所以这不会在大多数浏览器。 （背景图像似乎并没有在联SVG工作在歌剧 - 只有在.SVG文件）

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 due to the extra memory required to buffer intermediate images. 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?

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

<?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>

解决方案

Background-image is only supported by Opera and IE10 right now as a filter input, so this won't work in most browsers. (and background-image doesn't seem to work in inline SVG in opera - only in .svg files)

这篇关于哪些网页浏览器支持使用previous层作为源过滤SVG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！