SVG过滤器导致零件被切断

Question

我不确定描述此内容的最佳方式是什么，但我会上传图片，您可以在codepen上亲眼看到。

CSS：

.container{
  position: relative;
  margin-top: 50%;
  -webkit-filter: url("#goo");
  filter: url("#goo");
}

SVG过滤器：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>

基本上，我正在尝试使用SVG过滤器在某些圈子上创建“粘性”效果。它几乎按预期工作，除非有时在某些地方，效果将被“切断”。

发生这种情况的地方似乎随机变化。我试图在Chrome，Firefox和Edge中重现这一点，结果非常不一致。

这只是一个SVG过滤器出错的情况吗？或者我使用它们错了？

感谢。

Answer 1

SVG过滤器的filter effects region不会跨越整个画布，但只会超出它们所处理的对象边界框。您看不到的默认值在每个方向上都是10％：

<filter filterUnits="objectBoundingBox"
        x="-10%" y="-10%" width="120%" height="120%">

如果这些还不够，请选择更大的值。如果您不想使用百分比而是像素值，请设置filterUnits="userSpaceOnUse"并使用过滤对象的坐标系定位效果区域。