Атрибут stdDeviation у фильтра feGaussianBlur выполняется по разному в разных браузерах

Question

Размытие работает по разному во всех браузерах, основанных на Blink (это Chrome, Opera, Ms Edge) и Firefox. Работать в них начинает только в случае, если stdDeviation поставить в значении выше 0.7.
Но размытие на маленьком, по размеру элементе становится слишком большим.

Как его заменить? Или может есть другой фильтр с матрицей и т.п.?

<body>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" style="margin:9px;">
<defs>
<filter id="blur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.8" in="SourceGraphic"/>
</filter>

<symbol id="tt" viewBox="0 0 18 18" filter="url(#blur)"><path d="M8,2H9L15,8V9L9,15H8L2,9V8zM1,1L16,16M1,16L16,1" fill="none" stroke="#14c"/></symbol>
</defs>
<use href="#tt"/>
</svg>
</body>

На картинке ниже сравнивается, как выглядит размытие на разных браузерах при одинаковом значении атрибута stdDeviation

Есть ли решение данной проблемы?
Может использовать другие фильтры или комбинацию фильтров?

Вопрос сформирован из вопросов в SVG-чате участника @Bharatha

Answer 1

Используется комбинация фильтров feGaussianBlur и feColorMatrix Можно настроить прозрачность размытия с помощью feColorMatrix. Значение 4-й строки, 4-го столбца - это множитель для исходного альфа-значения. Похоже, что 1,5x примерно подходит для вашего эффекта.

<body>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" style="margin:9px">
<defs>
 <filter id="blurAlpha">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0.5" />
    <feColorMatrix type="matrix" values="1 0 0 0 0 
                                         0 1 0 0 0 
                                         0 0 1 0 0 
                                         0 0 0 1.5 0"/>
  </filter>

<symbol id="tt" viewBox="0 0 18 18" filter="url(#blurAlpha)"><path d="M8,2H9L15,8V9L9,15H8L2,9V8zM1,1L16,16M1,16L16,1" fill="none" stroke="#14c"/></symbol>
</defs>
<use href="#tt"/>
</svg>
</body>

БЛОГ НА HUSL

Атрибут stdDeviation у фильтра feGaussianBlur выполняется по разному в разных браузерах

Ответы (1 шт):