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>