SVG过滤器：边界框

Question

所以我遇到了以下问题：

首先，这是一个代码段

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>

如您所见，模糊似乎受到限制。这与Photoshop中的模糊效果相同：

模糊应导致某种圆形而不是正方形。框的溢出设置为visible，但这不会引起问题，因为模糊的一部分在框的边界框之外：

有人知道我如何删除边界框并达到与Photoshop相同的效果吗？

Answer 1

通过向您的过滤器元素添加x / y / width / height属性来扩展过滤器区域的大小，如下所示：

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>

Answer 2

    name2   data2
0      a      146
1      b       56

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，居中，然后将模糊应用于较大的div。这实际上将增加边界框的大小。这种方法的缺点是还必须处理网页中较大的div。较小的div使用flexbox居中。如果兼容性是一个问题，请访问this post。