How do I contain feGaussianBlur within a circle?-CodePudding

I'm trying to contain a feGaussianBlur within a circle in order make the circle's gradient smoother, but the blur expands beyond the circle.

I'm also using another gradient with a feGaussianBlur behind the top circle that will expand beyond it, so I can't use a mask over the top circle to cover up the color bleeding beyond it, else the blur of the circle below it will also be covered.

CodePudding user response：

In this example I add a gradient and filter to a <rect>. To make the circle I add a clip-path. The result is that the blur filter does not extend the circle.

I made two circles, the first without the blur filter and en second with the blur filter. As I see it the the one without filter looks more smooth. So, I don't know if it makes sense -- maybe in your use case?

<svg width="350" viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
  </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>
  <rect transform="translate(100 0)" width="100" height="100" fill="url(#gradient)" clip-path="url(#cp1)"/>
  <text font-size="10" x="50" y="105" text-anchor="middle">no filter</text>
  <rect width="100" height="100" fill="url(#gradient)" filter="url(#blur)" clip-path="url(#cp1)"/>
  <text font-size="10" x="150" y="105" text-anchor="middle">filter</text>
</svg>

CodePudding user response：

To contain a blur to the area of the original graphic, you add a feComposite/in to the end of your filter.

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