SVG过滤器导致在Firefox中使用viewbox剪裁SVG_Firefox_Svg_Svg Filters

SVG过滤器导致在Firefox中使用viewbox剪裁SVG

firefox svg

SVG过滤器导致在Firefox中使用viewbox剪裁SVG,firefox,svg,svg-filters,Firefox,Svg,Svg Filters,我试图创建一个可调整大小的SVG形状，当使用高斯滤波器选择它时，会产生“辉光”效果。当我尝试在Firefox（在v39+上试用过）中应用下面的过滤器时，当SVG元素的高度>大约490时，过滤器似乎会导致矩形在底部被剪裁。但这在chrome中不会发生。如果删除了过滤器，则不会剪裁矩形我花了好几个小时尝试各种过滤效果区域参数的组合，但似乎找不到任何适合SVG元素任意大小的组合。将过滤器放在g元素上似乎是可行的，但这里有一些我不希望应用过滤器的其他孩子我错过了什么？我如何才能让这一切顺利进行谢谢

我试图创建一个可调整大小的SVG形状，当使用高斯滤波器选择它时，会产生“辉光”效果。当我尝试在Firefox（在v39+上试用过）中应用下面的过滤器时，当SVG元素的高度>大约490时，过滤器似乎会导致矩形在底部被剪裁。但这在chrome中不会发生。如果删除了过滤器，则不会剪裁矩形

我花了好几个小时尝试各种过滤效果区域参数的组合，但似乎找不到任何适合SVG元素任意大小的组合。将过滤器放在g元素上似乎是可行的，但这里有一些我不希望应用过滤器的其他孩子

我错过了什么？我如何才能让这一切顺利进行

谢谢

戴夫

更新：Robert建议添加另一个

元素，虽然我把它放在

元素而不是

元素周围，但效果很好，因为如果它放在

元素周围，放大时模糊效果看起来很差。我没有将它添加到现有的

，因为该元素的其他子元素不应该有筛选器。

将用法包装在

元素中，然后将筛选器放在该元素上，或者将筛选器直接放在

元素上

html，主体，div{
宽度：100%；
身高：100%；
}

在发布问题之前，我确实尝试过将过滤器直接放在

元素上，但当我这样做时，过滤器的效果似乎根本看不见。

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