Фильтр размытия SVG имеет жесткие границы - PullRequest
Новая
       11

Фильтр размытия SVG имеет жесткие границы

1 голос
/ 09 апреля 2019

У меня есть этот код, в котором я хочу добавить feGaussianBlur к элементу <rect/>: 

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

Вывод отображается так: enter image description here

Как видите, стороны не смягчены. Стороны имеют жесткую границу.
Но когда я уменьшаю значение stdDeviation, оно работает хорошо. Вот вывод, если значение stdDeviation установлено в 10:

enter image description here

Почему он не работает должным образом со значением больше 10? И что я могу сделать, чтобы достичь этого?

1 Ответ

2 голосов
/ 09 апреля 2019

Расширить область фильтра

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

См. Область эффектов фильтра 

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