如何使用svg在矩形周围创建“发光”?

时间:2012-03-09 06:44:45

标签: svg svg-filters

我有以下内容:

<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中做到这一点。我环顾四周,所有我能找到的是“影子”,这不是我想要的,因为我想在矩形的四边都有一个阴影(发光)。

4 个答案:

答案 0 :(得分:47)

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

  • 阴影(带有轻微偏移的透明黑色阴影)
  • 黑光(固定颜色)
  • 对象颜色的光晕(采用它所应用的对象的颜色)

一个例子:

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>

答案 1 :(得分:12)

颜色矩阵不能真正用于使事物发出不同的颜色,只能以某种方式转换现有的颜色。

但我们可以做这样的事情......

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

根据this fiddle,查看我制作的Drew's answer

以下是过滤器功能的细分:

  • 将洪水填充与来源相结合(feFloodfeComposite)。
  • 稍微展开此彩色对象(feMorphologyoperator="dilate"
  • 应用我们良好的旧模糊效果让它焕发光彩! (feGaussianBlur
  • 在源(feMerge
  • 下粘贴这个有色,膨胀,发光的物体

答案 2 :(得分:8)

试试这个:

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

我在Inkscape中创建了原始过滤器,但无论它应用于何处,它都能正常工作。

答案 3 :(得分:0)

如果您使用模糊滤镜,请谨慎行事。特别是模糊在CPU资源方面可能是昂贵的。因此,它也可能更快地消耗电池。使用工具(例如,OS X活动监视器)观察滤镜的效果,尤其是涉及动画或视频时。