哪些網頁瀏覽器支持SVG過濾，並將上一層作爲源？

我創建了一個使用背景圖像作爲源的自定義SVG過濾器。然後應用一個隨機位移貼圖來模擬光學畸變（例如，水的焦散，從熱的流動的空氣中翹曲），這是我真正喜歡的。哪些網頁瀏覽器支持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>

來源

2013-03-08 Yale Zhang

此問題將更適合於stackoverflow – 2013-03-08 16:18:40

抱歉有關重複。這實際上是我在平面設計堆棧交換中發佈的第一個問題，因爲那時我並不認爲非編程問題適合Stack Overflow。版主，你應該刪除這個問題，因爲我的另一個是以後。 – 2013-03-10 02:17:37

背景圖像僅由Opera和IE10現在支持作爲濾波器的輸入，所以這不會在大多數瀏覽器。（並且背景圖像似乎不適用於歌劇中的內聯SVG - 僅適用於.svg文件）

來源

2013-03-09 20:27:14

哪些網頁瀏覽器支持SVG過濾，並將上一層作爲源？

回答

相關問題