如何在圆圈内包含 feGaussianBlur？

Question

我试图在一个圆圈内包含一个 feGaussianBlur 以使圆圈的渐变更平滑，但模糊扩展到圆圈之外。

我还在使用另一个渐变，在顶部圆圈后面有一个 feGaussianBlur，它会扩展到它之外，所以我不能在顶部圆圈上使用蒙版来掩盖超出它的颜色渗出，否则模糊它下面的圆圈也会被覆盖。

Answer 1

在这个例子中，我为两个圆和一个矩形添加了渐变。使用 clip-path 将矩形变成圆形。第二个圆圈和矩形应用了过滤器。过滤器具有 feComposite/in 以按照的建议将过滤器保持在圆圈内：<feComposite operator="in" in2="SourceGraphic"/>

据我所知，没有滤镜的看起来更光滑。所以，我不知道它是否有意义——也许在您的用例中？

<svg width="500" viewBox="0 0 300 110" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
      <feComposite operator="in" in2="SourceGraphic"/>
    </filter>
    <linearGradient id="gradient">
      <stop offset="0" stop-color="blue" />
      <stop offset="30%" stop-color="blue" />
      <stop offset="70%" stop-color="lightblue" />
      <stop offset="100%" stop-color="lightblue" />
    </linearGradient>
    <clipPath id="cp1">
      <circle cx="50" cy="50" r="45" />  
    </clipPath>
  </defs>
  <circle cx="50" cy="50" r="45" fill="url(#gradient)" />
  <text font-size="10" x="50" y="105" text-anchor="middle">circle no filter</text>
  
  <circle cx="150" cy="50" r="45" fill="url(#gradient)" filter="url(#blur)" />
  <text font-size="10" x="150" y="105" text-anchor="middle">circle filter</text>
  
  <rect transform="translate(200 0)" width="100" height="100" fill="url(#gradient)" clip-path="url(#cp1)" filter="url(#blur)"/>
  <text font-size="10" x="250" y="105" text-anchor="middle">rect filter</text>
</svg>

Answer 2

要对原始图形区域进行模糊处理，请在过滤器末尾添加 feComposite/in。

<feComposite operator="in" in2="SourceGraphic"/>

如何在圆圈内包含 feGaussianBlur？

How do I contain feGaussianBlur within a circle?

svg