当svg穿过剪辑路径时，它们会变形

Question

以下示例：

我想在中间保留一个固定区域，通过它来激活svg circle。

我见过的大多数例子涉及某种合并，最终显示原始圆圈和模糊版本。带我到这样的事情：

<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，而这两个a-blah a-blah2 b-blah 根本不起作用。

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

Answer 1

事情并不那么简单。为了实现这一点，你必须将一些东西叠加在一起。您需要一个遮罩来显示外部未模糊的对象，并使用一个过滤器在指定区域内显示它。两者都需要定义为userSpaceOnUse的单位。

＆＃13;

＆＃13;

#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) }
}

＆＃13;

<?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>

＆＃13;

＆＃13;

＆＃13;

过滤器的工作方式很有趣。在应用模糊之前，对象似乎被剪切，导致指定区域边界附近的模糊而不是硬切。我不确定是否将此称为错误或预期的行为。 （快速测试显示这适用于Firefox和Chrome。）