Menu
I have an quite complex, dynamically created svg image, that has been created using jQuery SVG. I'd like to create a "popup" area that shows on top of all svg elements in the canvas. To create a modern translucent iOS7 like look I'd like to apply a blur filter to everything below the popup area. I want to be able to dynamically set the x,y and also width and height attributes of this popup area.
Have a look at this example:
<svg width="500" height="500">
<rect x="10" y="10" height="235" width="235" fill="red" />
<rect x="255" y="10" height="235" width="235" fill="green" />
<rect x="10" y="255" height="235" width="235" fill="blue" />
<rect x="255" y="255" height="235" width="235" fill="yellow" />
<rect x="50" y="50" height="400" width="400" fill="rgba(255,255,255,0.8)" />
</svg>
In this case, everything that is covered by the white area should be blurred. It should then look like this:
I have found this, but here a static background image is used, which I don't have. Is there any why to accomplish this effect using svg, css and jQuery?
688
Code explanation:The blur effect is defined with the <feGaussianBlur> element. The in="SourceGraphic" part defines that the effect is created for the entire element. The stdDeviation attribute defines the amount of the blur. The filter attribute of the <rect> element links the element to the "f1" filter.
Filters are SVG's mechanism to create sophisticated effects. A basic example is to add a blur effect to SVG content. While basic blurs can be achieved with the help of gradients, the blur filter is needed to do anything beyond.
The <feGaussianBlur> SVG filter primitive blurs the input image by the amount specified in stdDeviation , which defines the bell-curve.
SVG is an open-standard XML format for two-dimensional vector graphics as defined by the World Wide Web Consortium (W3C). A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified bitmapped result. Filter effects are defined by filter elements.
How about this approach? It's a bit harder to use, but it seems to work on all browsers.
http://jsfiddle.net/J3X4p/2/
<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
<defs>
<filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
<feGaussianBlur x="50" y="50" width="400" height="400" stdDeviation="40" in="SourceGraphic" result="blurSquares"/>
<feComponentTransfer in="blurSquares" result="opaqueBlur">
<feFuncA type="linear" intercept="1"/>
</feComponentTransfer>
<feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"/>
</filter>
</defs>
<g id="squares" filter="url(#blurry)">
<rect x="10" y="10" height="235" width="235" fill="red" />
<rect x="255" y="10" height="235" width="235" fill="green" />
<rect x="10" y="255" height="235" width="235" fill="blue" />
<rect x="255" y="255" height="235" width="235" fill="yellow" />
</g>
<rect x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" fill-opacity="0.8" />
</svg>
It is trickier because the filter is applied to the background rather than the <rect>. For it to work, you have to copy the x,y,width and height from the <rect> to the feGaussianBlur primitive.
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
