SVG 过滤器导致 Firefox 中带有视图框的 SVG 剪辑答案

【问题标题】：SVG Filter causes clipping of SVG with viewbox in FirefoxSVG 过滤器导致 Firefox 中带有视图框的 SVG 剪辑
【发布时间】：2016-06-07 01:59:24
【问题描述】：

我正在尝试创建一个可调整大小的 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>

更新：Robert 建议添加另一个 <g> 元素起到了作用，尽管我将它放在 <svg> 元素而不是 <use> 元素周围，因为缩放时模糊效果看起来很差如果它在<use> 附近，则向上。我没有将其添加到现有的<g>，因为该对象的其他子代不应该有过滤器。

【问题讨论】：

标签： firefox svg svg-filters

【解决方案1】：

将 use 包装在 <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 实际上运行正常。

【讨论】：

在发布问题之前，我确实尝试将过滤器直接放在<use> 元素上，但是当我这样做时，过滤器效果似乎根本不可见。