SVG background blur with polygon - html

Question

I am trying to blur background with polygon svg shape. Below is svg. And here is Bin
<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;opacity: 0.5;">
<defs>
<filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="5" in="SourceGraphic" result="blurSquares"></feGaussianBlur>
<feComponentTransfer in="blurSquares" result="opaqueBlur">
<feFuncA type="linear" intercept="1"></feFuncA>
</feComponentTransfer>
<feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"></feBlend>
</filter>
</defs>
<g filter="url(#blurry)">
<polygon points="0,0 100,0 100,200 0,200 0,0"></polygon>
</g>
</svg>
I am expecting to see part of background image blurred. But it is not working as expected. What changes are required to make it work?

Answer 1

There is no reliable way for a blur filter in an SVG to automatically blur something behind the SVG on the page.
To achieve what you want, the background image has to be copied into the SVG and the blur filter applied to that. Of course you would need to make sure that the image in the HTML and the version of it in the SVG line up correctly.
So, for example, here's a version of your example with a blurred image in the SVG. But no polygon yet.
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
body {
background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg');
}
<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;">
<defs>
<filter id="blurry">
<feGaussianBlur stdDeviation="5" in="SourceGraphic"></feGaussianBlur>
</filter>
</defs>
<image x="0" y="0"
width="500" height="332"
xlink:href="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg"
filter="url(#blurry)" />
</svg>
Now if we want the blurred image to be inside the polygon, we can do that with a clipping path.
We turn the polygon into a clipping path and apply that to the blurred image.
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
body {
background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg');
}
<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;">
<defs>
<filter id="blurry">
<feGaussianBlur stdDeviation="5" in="SourceGraphic"></feGaussianBlur>
</filter>
<clipPath id="polyclip">
<polygon points="50,200, 300,50, 400,300" />
</clipPath>
</defs>
<image x="0" y="0"
width="500" height="332"
xlink:href="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg"
filter="url(#blurry)"
clip-path="url(#polyclip)" />
</svg>
Note that I'm using a slightly more interesting triangle polygon here. So that the effect is more obvious.

Answer 2

Put This code in your Polygon Tag :
<polygon points="200,0 0,160 500,330" style="fill:lime;stroke:purple;stroke-width:1"></polygon>
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
body {
background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg');
}
<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;opacity: 0.5;">
<defs>
<filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="5" in="SourceGraphic" result="blurSquares"></feGaussianBlur>
<feComponentTransfer in="blurSquares" result="opaqueBlur">
<feFuncA type="linear" intercept="1"></feFuncA>
</feComponentTransfer>
<feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"></feBlend>
</filter>
</defs>
<g filter="url(#blurry)">
<polygon points="200,0 0,160, 500,330" style="fill:lime;stroke:purple;stroke-width:1"></polygon>
</g>
</svg>

Answer 3

Your code works if you remove your feComponentTransfer and feBlend tags.
http://jsbin.com/tuyorotome/1/edit?html,css,output