SVG Filter: Bounding Box

Question

So I came across the following problem:

To start off, here's a code snippet

body{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.box{
  width:100px;
  height:100px;
  background:#545454;
  overflow:visible;
  filter:url("#distort");
}
svg{
  display:none;
}

<div class="box"></div>

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1">
    <defs>
        <filter id="distort">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20">
        </filter>
    </defs>
</svg>

As you can see the blur appears to be limited. Here's the same blur in Photoshop:

The blur should result in some kind of circular shape instead of that square. The overflow of the box is set to visible, but that shouldn't cause the problem since a part of the blur is outside the bounding box of the box:

Does anyone know how I can remove that bounding box and achieve the same effect like in Photoshop?

score 6 · Answer 1 · answered Jul 24 '18 at 00:19

Expand the size of your filter region by adding x/y/width/height attributes to your filter element like so:

body{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.box{
  width:100px;
  height:100px;
  background:#545454;
  overflow:visible;
}
.larger {
  width: 300px;
  height: 300px;
  filter: url("#distort");
  display: flex;
  justify-content: center;
  align-items: center; 
}
svg{
  display:none;
}

<div class="larger">
  <div class="box"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1">
    <defs>
        <filter id="distort"  x="-100%" y="-100%" height="300%" width="300%">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20">
        </filter>
    </defs>
</svg>

score 0 · Answer 2 · answered Jul 23 '18 at 13:02

body{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.box{
  width:100px;
  height:100px;
  background:#545454;
  overflow:visible;
}
.larger {
  width: 300px;
  height: 300px;
  filter: url("#distort");
  display: flex;
  justify-content: center;
  align-items: center; 
}
svg{
  display:none;
}

<div class="larger">
  <div class="box"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1">
    <defs>
        <filter id="distort">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20">
        </filter>
    </defs>
</svg>

One possible solution is to stick the box into a larger div, center it, and then apply the blur on the larger div. This will essentially increase the size of the bounding box. The downside to this method is having to deal with the larger div in your webpage as well. The smaller div is centered using a flexbox. If compatibility is an issue more solutions can be found at this post.

SVG Filter: Bounding Box

2 Answers2