svg - 如何使用svg在矩形周围创建“辉光”？

我有类似以下内容：

<svg id="svgLogo1" style="left:0; top:0; position:absolute"
        width="980" height="80" viewBox="0 0 980 80"
        xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6"
            style="stroke-width:2; xstroke:#FFF; fill:#555"/>
</svg>

我想在此周围创建白色发光。

有什么办法可以在svg中做到这一点？我环顾四周，我只能找到“阴影”，这并不是我真正想要的，因为我想要在矩形的所有四个边上都阴影（发光）。

最佳答案

以下是提供不同类型效果的一些过滤器：


投影（透明的黑色阴影，略有偏移）
黑色发光（固定颜色）
物体色的辉光（采用它所应用的物体的颜色）


一个例子：



有一个demo here。

代码：

<!-- a transparent grey drop-shadow that blends with the background colour -->
<filter id="shadow" width="1.5" height="1.5" x="-.25" y="-.25">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
    <feColorMatrix result="bluralpha" type="matrix" values=
            "1 0 0 0   0
             0 1 0 0   0
             0 0 1 0   0
             0 0 0 0.4 0 "/>
    <feOffset in="bluralpha" dx="3" dy="3" result="offsetBlur"/>
    <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent grey glow with no offset -->
<filter id="black-glow">
    <feColorMatrix type="matrix" values=
                "0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0.7 0"/>
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent glow that takes on the colour of the object it's applied to -->
<filter id="glow">
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>