Фильтр SVG вызывает отсечение SVG с полем просмотра в Firefox

Я пытаюсь создать изменяемую форму SVG с эффектом «свечения», когда она выбрана с использованием фильтра Гаусса. Когда я пытаюсь применить фильтр, как показано ниже, в Firefox (проверено на v39+), кажется, что фильтр заставляет прямоугольник обрезаться внизу, как только высота элемента SVG составляет > около 490. Этого не происходит. хотя в хроме. Если фильтр удален, прямоугольник не обрезается.

Я часами возился, пробуя различные комбинации параметров области эффекта фильтра, но не могу найти ничего, что работало бы для произвольных размеров элемента SVG. Применение фильтра к элементу g, кажется, работает, но здесь будут другие дочерние элементы, к которым я не хочу применять фильтр.

Что мне не хватает и как я могу заставить это работать?

Спасибо,

Дэйв

<html>
<body>
<div style = "width: 100%; height: 100%">
    <svg style = "width: 100%; height: 100%">
        <defs>
            <symbol id="rectangle">
                <polygon vector-effect="non-scaling-stroke" points="3,3 103,3 103,53 3,53"></polygon>
            </symbol>
        </defs>         
        <filter id="nodeGlow" width="100" height="100">
            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
            <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>      
        </filter>           
        <g>
            <svg style="fill: rgb(0, 251, 255); 
                        stroke: rgb(30, 30, 30); 
                        stroke-width : 1.5px;
                        filter: url(&quot;#nodeGlow&quot;);"
                        y="0" x="0" 
                        height="500" width="200" 
                        class="node" preserveAspectRatio="none" 
                        viewBox="0 0 106 56">
                <use xlink:href="#rectangle"></use>
            </svg>
        </g>
    </svg>
</div>
</html>
</body>

Обновление: предложение Роберта добавить еще один элемент <g> сработало, хотя я поместил его вокруг элемента <svg>, а не элемента <use>, потому что эффект размытия выглядел плохо при увеличении, если он был вокруг <use>. Я не добавлял его к существующему <g>, потому что будут другие дочерние элементы этого, у которых не должно быть фильтра.


svg firefox svg-filters
person Dave    schedule 24.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Оберните использование в элемент <g> и поместите фильтр на него или поместите фильтр непосредственно на элемент <use>.

html, body, div {
  width: 100%;
  height: 100%;
}
<div>
    <svg width="100%" height="100%">
        <defs>
            <symbol id="rectangle">
                <polygon vector-effect="non-scaling-stroke" points="3,3 103,3 103,53 3,53"></polygon>
            </symbol>
        </defs>         
        <filter id="nodeGlow" width="100" height="100">
            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
            <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>      
        </filter>           
        <g>
            <svg style="fill: rgb(0, 251, 255); 
                        stroke: rgb(30, 30, 30); 
                        stroke-width : 1.5px;"
                        height="500" width="200" 
                        class="node" preserveAspectRatio="none" 
                        viewBox="0 0 106 56">
                <g style="filter: url(#nodeGlow);">
                    <use xlink:href="#rectangle"></use>
                </g>
            </svg>
        </g>
    </svg>
</div>

Применение фильтра к чему-то, что имеет viewBox, вряд ли сработает, поскольку viewBox меняет систему координат своих дочерних элементов, но не меняет систему координат элемента. Firefox на самом деле работает правильно.

person Robert Longson    schedule 24.02.2016
comment
Я попытался поместить фильтр непосредственно в элемент <use>, прежде чем опубликовать вопрос, но эффект фильтра, похоже, вообще не был виден, когда я это сделал. - person Dave; 26.02.2016