Question

我正在尝试创建一个可调整大小的SVG形状，并带有一个发光的＆＃39;使用高斯滤波器选择时的效果。当我尝试应用如下所示的过滤器时，在Firefox（试过v39 +）中，一旦SVG元素的高度> 1，过滤器似乎会导致矩形被剪裁在底部。大约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>元素而不是{{1} }元素，因为如果在<use>附近放大时，模糊效果看起来很差。我没有将它添加到现有的<use>，因为那个孩子的其他孩子不应该有过滤器。

Answer 1

在<g>元素中包含使用内容并将过滤器放在该元素上，或将过滤器直接放在<use>元素上。

＆＃13;

html, body, div {
  width: 100%;
  height: 100%;
}

＆＃13;

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

＆＃13;

将过滤器放在具有viewBox的东西上是不太可能的，因为viewBox改变了其子节点的坐标系，但它并没有改变元素的坐标系。 Firefox实际上正常运行。

SVG过滤器导致在Firefox

1 个答案: