我如何创建“发光"图片?围绕一个带有svg的矩形? [英] How can I create a "glow" around a rectangle with svg?
本文介绍了我如何创建“发光"图片?围绕一个带有svg的矩形?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有类似以下内容的东西:
I have something like the following:
<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>
我想在此周围创建白色发光.
I would like to create a white glow around this.
有什么办法可以在svg中做到这一点吗?我环顾四周,我只能找到阴影",这并不是我真正想要的,因为我想要在矩形的所有四个边上都阴影(发光).
Is there some way that I can do this in svg. I looked around and all I can find is "shadow" which is not really what I am looking for as I want a shadow (Glow) around all four sides of the rectangle.
推荐答案
以下是提供不同类型效果的过滤器:
Here are some filters that provide different types of effect:
- 阴影(透明的黑色阴影,稍有偏移)
- 黑色发光(具有固定的颜色)
- 对象颜色的辉光(采用对象所应用的对象的颜色)
一个例子:
这里有一个演示.
代码:
<!-- 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>
这篇关于我如何创建“发光"图片?围绕一个带有svg的矩形?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文