CODEWITHSUNDEEP
svgsvg-filters
Puspam
Puspam

Reputation: 2787

SVG blur filter has hard borders

I have this code in which I want to add a feGaussianBlur to a <rect/> element:

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <defs>
        <filter id="f">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
        </filter>
    </defs>
    <rect x="100" y="100" height="200" width="180" fill="green" filter="url(#f)"/>
</svg>

The output is rendered like this: enter image description here

As you can see, that the sides are not softened. The sides have a hard border.
But, when I decrease the value of the stdDeviation, it works well. Here is the output if the value of stdDeviation is set to 10:

enter image description here

Why is it not working properly with a value greater than 10? And what can I do to achieve it?

Upvotes: 1

Views: 1483

Answers (2)

Joshua Comeau
Joshua Comeau

Reputation: 2753

If you're using this on the web, you can solve this with a single line of CSS:

svg { overflow: visible; }

This will allow the SVG to bleed out beyond the edge of the element.

Upvotes: -1

Alexandr_TT
Alexandr_TT

Reputation: 14565

Expand the filter region

x="-20%" y="-20%" width="150%" height="150%"

See Filter effects region

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <defs>
        <filter id="f" x="-20%" y="-20%" width="150%" height="150%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
        </filter>
    </defs>
    <rect x="100" y="100" height="200" width="180" fill="green" filter="url(#f)"/>
</svg>

Upvotes: 8

Related Questions