通过剪辑路径时模糊svg形状

示例如下：

<>我想在中间保持一个固定的区域，SVG <代码>圆圈> /Cult> s被动画化。

我看到的大多数例子都涉及到某种合并，最终显示原始圆和模糊版本。让我想到了这样的事情：

<clipPath id="top-mask">
  <rect id="top-mask-rect" x="0" y="-100" width="100" height="100" />
</clipPath>

<filter id="top-blur" x="-200%" y="-200%" width="500%" height="500%">
  <feimage xlinkHref="url(#top-mask)" result="mask" />
  <feGaussianBlur stdDeviation="1.5" result="blur" />

  <feComposite in2="mask" in="blur" operator="in" result="comp" />

  <feMerge result="merge">
    <feMergeNode in="SourceGraphic" />
    <feMergeNode in="comp" />
  </feMerge>
</filter>

这似乎覆盖了一个稍微模糊的版本上面的圆圈。我下一个天真的步骤是删除

feComposite

，而将

clipPath

应用于根本不起作用的

feMergeNode

---

解决这个问题的正确方法是什么？

事情并没有那么简单。你必须把东西叠在一起，这样才能工作。您需要一个遮罩来显示外部未模糊的对象，以及一个过滤器来显示指定区域内的对象。这两个单元都需要定义为

userSpaceOnUse

#移动{
动画：移动5s，轻松进出无限；
}
@关键帧移动{
0%{transform:translate（0px，0px）}
50%{transform:translate（300px，0px）}
100%{transform:translate（0px，0px）}
}

设置过滤器的宽度和x，您似乎不需要剪裁。宽度和x与被模糊的物体有关，而不是全局空间。在这种情况下，我模糊了圆圈。根据单位，使用userSpaceOnUse单位，它是全局空间。@RobertLongson似乎认为如果这样做，过滤区域之外的东西不会渲染，你必须按照答案的建议，通过use元素在外部或内部再次渲染它们。