SVG内发光实现

SVG内发光实现"/>

SVG内发光实现

百度了好久都没找到，最后谷歌在外网找到的一个关于SVG内发光实现(svg inset shadow）

<svg width="600" height="600"><filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%"><feComponentTransfer in=SourceAlpha><feFuncA type="table" tableValues="1 0" /></feComponentTransfer><feGaussianBlur stdDeviation="4"/><feOffset dx="0" dy="1" result="offsetblur"/><feFlood flood-color="#0d619d" result="color"/><feComposite in2="offsetblur" operator="in"/><feComposite in2="SourceAlpha" operator="in" /><feMerge><feMergeNode in="SourceGraphic" /><feMergeNode /></feMerge></filter><rect x=100 y=100 width=20% height=50% fill=#0a112b filter="url(#inset-shadow)" />
</svg>

实现的效果差不多就是这个样子 

更新：

实现任意SVG元素内发光效果

<filter id="inset-shadow"><feFlood flood-color="red" /><feComposite in2="SourceGraphic" operator="out" /><feGaussianBlur stdDeviation="3" result="blur" /><feComposite operator="atop" in2="SourceGraphic"/>
</filter>

<text x="100" y="250" font-size="80" font-weight="bold" fill="#0000ff" filter="url(#inset-shadow)">INSET SHADOW</text>

实现的效果如下图：