Databases
StackOverflow2013
Postsdbo
POWhich web browsers support SVG filtering with the background as a source? Reasonable work around?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhich web browsers support SVG filtering with the background as a source? Reasonable work around?
    primarykey
    data
    text
    <p>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.</p> <p>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?</p> <p>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?</p> <p>I've attached an example below (you should see a star with the bottom half distorted by the filter).</p> <p><a href="http://jsbin.com/oveqoh/1/" rel="nofollow">Link to live SVG image on JSBin</a></p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;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/"&gt; &lt;defs id="defs1382"&gt; &lt;filter id="filter1945" style="color-interpolation-filters:sRGB"&gt; &lt;feTurbulence id="feTurbulence1947" baseFrequency="0.034000000000000009" seed="397" result="turbulence" numOctaves="4" type="turbulence"/&gt; &lt;feDisplacementMap id="feDisplacementMap1949" scale="100" yChannelSelector="G" in2="turbulence" xChannelSelector="R" in="BackgroundImage"/&gt; &lt;/filter&gt; &lt;radialGradient id="radialGradient5645" gradientUnits="userSpaceOnUse" cy="402" cx="359" gradientTransform="matrix(.0557 -.0464 .178 .207 268 339)" r="417"&gt; &lt;stop id="stop5641" stop-color="#fee" offset="0"/&gt; &lt;stop id="stop5643" stop-color="#fee" stop-opacity="0" offset="1"/&gt; &lt;/radialGradient&gt; &lt;radialGradient id="radialGradient5653" gradientUnits="userSpaceOnUse" cy="407" cx="248" gradientTransform="matrix(.537 -.681 .793 .625 -234 -28)" r="47.2"&gt; &lt;stop id="stop5649" stop-color="#f00" offset="0"/&gt; &lt;stop id="stop5651" stop-color="#784421" offset="1"/&gt; &lt;/radialGradient&gt; &lt;/defs&gt; &lt;metadata id="metadata1385"&gt; &lt;rdf:RDF&gt; &lt;cc:Work rdf:about=""&gt; &lt;dc:format&gt;image/svg+xml&lt;/dc:format&gt; &lt;dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/&gt; &lt;dc:title/&gt; &lt;/cc:Work&gt; &lt;/rdf:RDF&gt; &lt;/metadata&gt; &lt;g fill-rule="evenodd"&gt; &lt;rect id="rect5726" height="135" width="339" y="0" x="27.9"/&gt; &lt;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)"/&gt; &lt;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)"/&gt; &lt;/g&gt; &lt;/svg&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USYale Zhang
    plurals
    1. PL
      singulars
      1. LTDuplicate
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhich web browsers support SVG filtering with the background as a source? Reasonable work around?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHey, sorry about the duplicate. This actually is my latest post, so please delete the other one that I originally posted on the Graphics Design stack exchange.
      singulars
      1. POWhich web browsers support SVG filtering with the background as a source? Reasonable work around?
      1. USYale Zhang
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload