SVG 过滤器导致部分被切掉答案

【问题标题】：SVG Filters results in parts being chopped offSVG 过滤器导致部分被切掉
【发布时间】：2017-10-19 17:35:13
【问题描述】：

我不确定描述这种情况的最佳方式是什么，但我会上传一张图片，您可以在 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 过滤器出现问题的一个例子吗？还是我用错了？

谢谢。

【问题讨论】：

一般出现这种情况是因为过滤区域不够大。但是我认为在这种情况下很好。在 Firefox 中看起来不错。但是，Chrome 中存在一些问题。但我认为这只是一个 Chrome 错误。
如果你把它做成一个纯 SVG 动画，而不是尝试将 SVG 过滤器应用于 HTML 元素，你可能会发现你的运气会更好。

标签： css svg svg-filters

【解决方案1】：

SVG 滤镜有一个filter effects region，它不跨越整个画布，但只超出了它们处理的对象边界框。您看不到的默认值是每个方向的 10%：

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

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

【讨论】：