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

Question

下面的例子:

我想在中间保持一个固定区域，其中有 svg circles 通过它进行动画处理。

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

<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 根本不起作用。

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

Answer 1

事情并没有那么简单。您必须将一些东西堆叠在一起才能起作用。您需要一个蒙版来显示外面未模糊的对象，并需要一个过滤器来显示指定区域内的对象。两者都需要定义为 userSpaceOnUse 的单位。

#moving {
  animation: move 5s ease-in-out infinite;
}
@keyframes move {
    0% { transform: translate(0px, 0px) }
   50% { transform: translate(300px, 0px) }
  100% { transform: translate(0px, 0px) }
}

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     height="300" width="500">
  <defs>
  <mask id="mask"
        maskUnits="userSpaceOnUse">
    <rect width="100%" height="100%" fill="white" />
    <rect id="still" x="150" y="0" width="200" height="300" fill="black" />
  </mask>
    <filter id="blur" x="150" y="0" width="200" height="300"
            filterUnits="userSpaceOnUse">
      <feGaussianBlur stdDeviation="10" />
    </filter>
  </defs>
  <g mask="url(#mask)">
    <circle id="moving" r="60" cy="150" cx="100" fill="blue" />
  </g>
  <g filter="url(#blur)">
    <use xlink:href="#moving" />
  </g>
</svg>

过滤器的工作方式很有趣。对象似乎在应用模糊之前被剪裁，导致指定区域边界附近出现模糊，而不是硬剪切。我不确定是将此称为错误还是预期行为。 (一个快速测试显示了 Firefox 和 Chrome。)