我如何才能创建一个；“发光”；使用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中实现这一点。我环顾四周，我能找到的只是“阴影”，这并不是我真正想要的，因为我想在矩形的四个边上都有一个阴影（光晕）。

试试这个：

<svg id="svgLogo1" style="left: 0px; top: 0px;
  position: absolute;" width="980" height="80" viewBox="0 0 980 80"
  xmlns="http://www.w3.org/2000/svg" version="1.1" >
    <defs>
        <filter id="dropGlow" width="1.5" height="1.5" x="-.25" y="-.25">
            <feGaussianBlur id="feGaussianBlur5384" in="SourceAlpha" stdDeviation="15.000000" result="blur"/>
            <feColorMatrix id="feColorMatrix5386" result="bluralpha" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 0.800000 0 "/>
            <feOffset id="feOffset5388" in="bluralpha" dx="0.000000" dy="0.000000" result="offsetBlur"/>
            <feMerge id="feMerge5390">
                <feMergeNode id="feMergeNode5392" in="offsetBlur"/>
                <feMergeNode id="feMergeNode5394" in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6"
        style="stroke-width: 2; xstroke: #FFFFFF; fill: #555555; filter:url(#dropGlow)"/>
</svg>

---

我在中创建了原始过滤器，但它在任何应用上都同样有效。

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

• 放置阴影（具有轻微偏移的透明黑色阴影）
• 黑色辉光（具有固定颜色）
• 对象彩色光晕（采用应用该光晕的对象的颜色）

例如：

有一个

守则：

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

---

颜色矩阵不能真正用于使物体发出不同的颜色，只能以某种方式变换现有的颜色

但是我们可以做类似的事情来代替…

<filter id="white-glow">
    <feFlood result="flood" flood-color="#ffffff" flood-opacity="1"></feFlood>
    <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
    <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
    <feMerge>
        <feMergeNode in="blurred"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

看我做的，基于

下面是过滤器功能的细分：

• 将洪水填充与震源组合，以将其着色（

  feFlood

  和

  feComposite

  ）
• 稍微展开这个彩色对象（

  feMorphology

  ，使用

  operator=“deflate”

  ）
• 应用我们良好的老模糊效果，使其发光！（

  feGaussianBlur

  ）
• 将这个彩色的、展开的、发光的对象粘贴在源代码下（

  feMerge

  ）

---

如果使用模糊过滤器，请小心谨慎。就CPU资源而言，模糊尤其昂贵。因此，它也可能更快地消耗电池。使用工具（如OS X活动监视器）观察过滤器的效果，尤其是在涉及动画或视频的情况下。

您可能会发现添加2个阴影是否是一个选项？一个是右下，另一个是左上？谢谢你的建议。问题是我看不到如何创建白色阴影。我在创造黑色而非白色方面取得了很多成功。没有x，y偏移的阴影可以看起来像辉光…+1表示Inkscape。我尝试了提供的svg，但它不起作用，因为如果矩形的填充使用alpha通道，如“rgba（3,3,3,0.9）”，阴影会修改矩形的颜色。有什么方法可以避免这种情况吗？您可以添加另一个“feComposite”步骤，以去除原始对象下方的任何辉光像素。我给你做了一把小提琴：）将鼠标悬停在小提琴中的对象上以应用光晕-你会看到它们的颜色没有变化：）不过，附加的“feComposite”在firefox和safari中似乎不起作用。啊，这太烦人了！恐怕我不知道该怎么解决这个问题：/