百宝箱系列之13篇：为SVG图形添加四周发光阴影效果

简单说几句

最近在项目中遇到一个锦上添花的需求点，抽象出来就是为SVG中circle元素添加四周的发光阴影效果。百度了很久，都没有比较清晰明确的实现效果，甚至效果图都看不到。

实现效果如下图所示：部分内容添加了马赛克，涉及到保密协议

如果你的需求如上图所示，可以继续往下看。

故事的背景是不能直接改动svg文件，因为文件内容是动态更新的，因此SVG提供的 feOffset 不能使用，而且只能添加半边的阴影效果。
思路只能是通过js中对svg进行操作实现。

正文开始

主要采用了Snap.svg库对svg实现操作，Snap.svg是Adobe公司出品的针对简化svg操作的js库，封装了原生的js操作svg方法

这里提一句：svg的性能是个问题，如果将如何优化svg性能的问题寄希望于这些svg操作库，那可能会令人失望，这些库的意义在于简化操作，而不是优化性能。优化性能的最佳出发点还是优化页面中的svg元素。

如果对于Snap.svg还不是很会用的话，可以看一下张鑫旭的中文翻译版本：Snap.svg中文文档

如果对上面的内容比较了解的话，可能会有同学会问为什么不使用其中封装的如下图阴影滤镜，岂不是更加方便直接？

这个想法很棒，我最开始也是这样做的，后来很头疼的发现，无法指定color，这个是非常致命的问题，因为默认是黑色的，我也翻阅了Snap.svg的官网文档，依然一无所获。只能放弃。

重点来了

那么我是如何解决这个问题的呢？我取了个巧：我使用blur的滤镜效果，来模拟达到阴影的效果，而且效果比较理想。一起来看看吧

let blurObj = svgElement.paper.filter(Snap.filter.blur(10));
let blurShadow = svgElement.paper.circle(cx, cy, r + 5).attr({
    "stroke-width": 20,
    stroke:"#FF0000",
    id: baseId + "_blurShadow",
    filter: blurObj
})

其实很简单，最重要的就是我圈出来的两行

由于时间的缘故，写到这里恰好有工作要处理，所以没有专门的写个demo示例，不过实现原理是比较简单的，可以自己测试一下，如果比较适合项目需求，可以直接使用。