CODEWITHSUNDEEP
htmlsvg
Exception
Exception

Reputation: 8379

SVG background blur with polygon

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?

Upvotes: 1

Views: 8951

Answers (3)

Paul LeBeau
Paul LeBeau

Reputation: 101868

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.

Upvotes: 4

elvislives
elvislives

Reputation: 138

Your code works if you remove your feComponentTransfer and feBlend tags.

http://jsbin.com/tuyorotome/1/edit?html,css,output

Upvotes: 1

Sachin Sanchaniya
Sachin Sanchaniya

Reputation: 1044

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>

Upvotes: 1

Related Questions