Css SVG过滤器导致部件被切断

我不知道什么是最好的方式来描述这一点，但我会上传一张图片，你可以看到自己的网站上。

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过滤器有问题的一种情况吗？还是我用错了

谢谢。

SVG过滤器有一个不覆盖整个画布的窗口，但仅略超出它们所处理的对象边界框。在每个方向上看不到的默认值为10%：

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

如果这些还不够，请选择更大的值。如果您不喜欢使用百分比，而是使用像素值，请设置

filterUnits=“userSpaceOnUse”

，并使用过滤对象的坐标系定位效果区域。

SVG过滤器具有一个不覆盖整个画布，但仅稍微超出其工作的对象边界框的区域。在每个方向上看不到的默认值为10%：

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

---

如果这些还不够，请选择更大的值。如果您不喜欢使用百分比，而是使用像素值，请设置

filterUnits=“userSpaceOnUse”

并使用过滤对象的坐标系定位效果区域。

通常情况下，这是因为过滤区域不够大。不过，我认为在这种情况下是可以的。在Firefox中看起来不错。然而，Chrome中存在一些问题。但我认为这只是一个Chrome bug。如果您将其制作为仅SVG的动画，而不是尝试将SVG过滤器应用于HTML元素，您可能会发现运气更好。通常情况下，这是因为过滤器区域不够大。不过，我认为在这种情况下是可以的。在Firefox中看起来不错。然而，Chrome中存在一些问题。但我认为这只是一个Chrome bug。如果你把它制作成一个只支持SVG的动画，而不是试图将SVG过滤器应用到HTML元素，你可能会发现你的运气会更好。