Почему не применяется фильтр svg?

Question

[Максим]

Есть фильтр для svg:

<filter id="blue_glow" filterUnits="userSpaceOnUse" x="-50%" y="-50%" width="200%" height="200%">

            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur5"/>
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur10"/>
            <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur20"/>
            <feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur30"/>
            <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blur50"/>

            <feMerge result="blur-merged">
                <feMergeNode in="blur10"/>
                <feMergeNode in="blur20"/>
                <feMergeNode in="blur30"/>
                <feMergeNode in="blur50"/>
            </feMerge>

            <feColorMatrix result="blue-glow-m" in="blur-merged" type="matrix"
                           values="0.05 0    0 0    0
                                      0 0.75 0 0    0
                                      0 0    1 0    0
                                      0 0    0 0.99 0"/>
            <feMerge>
                <feMergeNode in="blue-glow-m"/>
                <feMergeNode in="blur5"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>

Если убрать filterUnits="userSpaceOnUse", то фильтр применяется, svg виден, если не убирать, то svg не отображается, почему так?

Вот сам svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250pt" height="250pt" viewBox="0 0 250 250" version="1.1">
<g>
<path d="M 240.234375 101.425781 L 173.566406 34.757812 C 160.582031 21.757812 139.417969 21.757812 126.433594 34.757812 C 120.132812 41.042969 116.667969 49.425781 116.667969 58.324219 C 116.667969 67.226562 120.132812 75.609375 126.433594 81.890625 L 169.535156 124.992188 L 126.433594 168.089844 C 120.132812 174.390625 116.667969 182.757812 116.667969 191.660156 C 116.667969 200.558594 120.132812 208.925781 126.433594 215.226562 C 132.734375 221.523438 141.101562 224.992188 150 224.992188 C 158.898438 224.992188 167.265625 221.523438 173.566406 215.226562 L 240.234375 148.558594 C 246.535156 142.273438 250 133.890625 250 124.992188 C 250 116.089844 246.535156 107.707031 240.234375 101.425781 Z M 228.449219 136.773438 L 161.785156 203.441406 C 155.464844 209.742188 144.535156 209.742188 138.214844 203.441406 C 131.714844 196.941406 131.714844 186.375 138.214844 179.875 L 193.101562 124.992188 L 138.214844 70.109375 C 135.066406 66.957031 133.332031 62.773438 133.332031 58.324219 C 133.332031 53.875 135.066406 49.691406 138.214844 46.542969 C 141.464844 43.292969 145.734375 41.660156 150 41.660156 C 154.265625 41.660156 158.535156 43.292969 161.785156 46.523438 L 228.449219 113.191406 C 231.601562 116.359375 233.332031 120.542969 233.332031 124.992188 C 233.332031 129.441406 231.601562 133.625 228.449219 136.773438 Z M 228.449219 136.773438 "/>
<path d="M 123.566406 101.425781 L 56.898438 34.757812 C 43.917969 21.757812 22.75 21.757812 9.765625 34.757812 C 3.464844 41.042969 0 49.425781 0 58.324219 C 0 67.226562 3.464844 75.609375 9.765625 81.890625 L 52.867188 124.992188 L 9.765625 168.089844 C 3.464844 174.390625 0 182.757812 0 191.660156 C 0 200.558594 3.464844 208.925781 9.765625 215.226562 C 16.066406 221.523438 24.433594 224.992188 33.332031 224.992188 C 42.234375 224.992188 50.601562 221.523438 56.898438 215.226562 L 123.566406 148.558594 C 129.867188 142.273438 133.332031 133.890625 133.332031 124.992188 C 133.332031 116.089844 129.867188 107.707031 123.566406 101.425781 Z M 111.785156 136.773438 L 45.117188 203.441406 C 38.800781 209.742188 27.867188 209.742188 21.550781 203.441406 C 15.050781 196.941406 15.050781 186.375 21.550781 179.875 L 76.433594 124.992188 L 21.550781 70.109375 C 18.398438 66.957031 16.667969 62.773438 16.667969 58.324219 C 16.667969 53.875 18.398438 49.691406 21.550781 46.542969 C 24.800781 43.292969 29.066406 41.660156 33.332031 41.660156 C 37.601562 41.660156 41.867188 43.292969 45.117188 46.523438 L 111.785156 113.191406 C 114.933594 116.359375 116.667969 120.542969 116.667969 124.992188 C 116.667969 129.441406 114.933594 133.625 111.785156 136.773438 Z M 111.785156 136.773438 "/>
</g>
</svg>

На страницу вставляется вот так:

<svg class="i mp-next__i" aria-hidden="true"><use xlink:href="#next"/></svg>

В классе i только одна инструкция: display: inline-block;, в классе mp-next__i:

transform: rotate(90deg);
fill: #fff;
width: 55px;
height: 55px;
filter: url('#blue_glow');

Answer 1

[Максим]

Как обычно - задал вопрос и нашел решение.
У меня спрайт с svg символами скрыт так:

height: 0;
position: absolute;
visibility: hidden;
width: 0;

Если убрать visibility: hidden, то все работает.

Comments

[Максим]

Я не знал, что это может повлиять на фильтр. Сейчас - знаю. Сейчас возникла другая ситуация https://s.mail.ru/Cg2p/S6tY13aqn в файрфоксе вот так отображается, а в хроме и edge нормально: https://s.mail.ru/v55d/V44svTgbP

[RAX7]

Максим, в данном случае лучше использовать CSS фильтр drop-shadow, если он по каким-то причинам не подходит, смотри комментарии к этому ответу Как сверстать это блок?

[Максим]

RAX7, благодарю!