SVG 过滤器：边界框答案

【问题标题】：SVG Filter: Bounding BoxSVG 过滤器：边界框
【发布时间】：2018-07-24 08:19:32
【问题描述】：

所以我遇到了以下问题：

首先，这里有一个代码 sn-p

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 中相同的效果？

【问题讨论】：

标签： html css overflow svg-filters

【解决方案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>

【讨论】：

【解决方案2】：

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>

一种可能的解决方案是将框粘贴到较大的 div 中，使其居中，然后在较大的 div 上应用模糊。这将实质上增加边界框的大小。这种方法的缺点是还必须处理网页中较大的 div。较小的 div 使用 flexbox 居中。如果兼容性是一个问题，可以在this post 找到更多解决方案。

【讨论】：