wrong rendering of blurred circle in svg

Question

I want to draw a blurred circle in svg, but with some higher stdDeviation values, it will be cropped.

I tried several attributes like "edgeMode" on the "feGaussianBlur" tag or 'width="150%"' and 'height="150%"' on the "circle" and "filter" tag, but nothing helps.

Any ideas?

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="f1">
            <feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
        </filter>
    </defs>
    <circle cx="100" cy="100" r="30" fill="#ff0000" filter="url(#f1)"/>
</svg>

Answer 1

Adjusting the filter's x, y, width and height is all that's required.

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="f1" x="-60%" y="-60%" width="220%" height="220%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
        </filter>
    </defs>
    <circle cx="100" cy="100" r="30" fill="#ff0000" filter="url(#f1)"/>
</svg>