搞懂SVG中各种Light相关的光源滤镜
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11330
本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。
SVG中有多个与光源相关的滤镜，看起来有些小复杂，今天就好好学一学，想办法都弄懂了，说不定哪一天就用到了。
一、fePointLight滤镜
顾名思义就是点光源滤镜效果。
和很多其他光源滤镜一样，要想生效，需要用在照明过滤器元件中。
所谓的照明过滤器，在SVG中，其实指的是<feDiffuseLighting> 和 <feSpecularLighting>这两个元素。
前者指的漫反射，后者指的镜面反射。
其实，SVG光源滤镜就是那么回事，一是确定光源的类型，是点光（灯泡）、平行光（太阳），还是聚光（聚光灯），二是确定物体表面发射的类型，是漫反射还是镜面反射，这些初中还是高中物理应该都讲过的。
好，为了方便学习，有必要先学习<feDiffuseLighting> 和 <feSpecularLighting>这两个元素。
二、以feSpecularLighting元素举例
先从案例开始说起吧。
使用feSpecularLighting，也就是镜面反射源实现一个点光照射的按钮效果吧。
相关SVG代码如下所示（复制到页面任意位置）：
<svg
width="0"
height="0"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="spotlight">
<feSpecularLighting
result="spotlight"
specularConstant="0.5"
specularExponent="50"
lighting-color="#FFF">
<fePointLight x="20" y="10" z="50" />
</feSpecularLighting>
<feComposite
in="SourceGraphic"
in2="spotlight"
operator="arithmetic"
k1="0"
k2="1"
k3="1"
k4="0" />
</filter>
</defs>
</svg>
然后给需要应用该滤镜效果的元素使用CSS代码就可以了，例如：
button {
filter: url(#spotlight);
}
此时，按钮的左上角就可以看到光照特效了。
如下图效果所示：
眼见为实，您可以狠狠地点击这里：SVG光影滤镜应用在按钮demo
下面，讲下feSpecularLighting滤镜的语法。
语法
支持下面5个属性。
- in
输入光源元素的id，可以缺省（如果光源元素是其子元素）。
- surfaceScale
surfaceScale属性表示应用光源元素的曲面高度。
- specularConstant
表示镜面反射常数，此值越大，光影越亮越明显。
- specularExponent
镜面反射指数。
- kernelUnitLength
此属性已经不推荐使用，字面意思是核心单位长度。
顺便fePointLight的语法
<fePointLight>滤镜的语法就简单多了，为 x, y, z三个值，分别表示光源中心点的横纵坐标和高度。
其他就没啥了。
三、再来说说feDiffuseLighting
接下来讲讲漫反射滤镜。
还是上面的例子，如果我们给按钮使用漫反射滤镜光影效果，那么该如何处理呢？这里有个使用案例：
<svg
width="0"
height="0"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="spotlight">
<feDiffuseLighting
result="spotlight"
diffuseConstant="1"
lighting-color="#FFF">
<fePointLight x="20" y="10" z="40" />
</feDiffuseLighting>
<feComposite
in="SourceGraphic"
in2="spotlight"
operator="arithmetic"
k1="1"
k2="0"
k3="0"
k4="0" />
</filter>
</defs>
</svg>
button {
filter: url(#spotlight);
}
此时，按钮的光影效果则是这样的：
可以看到，出现了光照阴影，而镜面反射则是白光叠加。
眼见为实，您可以狠狠地点击这里：SVG漫反射光影按钮特效demo
其中的变化有：
- 参数名称不同；
- feComposite参数不同，也就是颜色混合算法不同；
语法
- in
同feSpecularLighting。
- surfaceScale
surfaceScale属性表示应用光源元素的曲面高度。
- diffuseConstant
表示Phong照明模型中的kd值。在SVG中，这可以是任何非负数。
- kernelUnitLength
同feSpecularLighting。
Phong光照模型
Phong光照模型是真实图形学中提出的第一个有影响的光照明模型，该模型只考虑物体对直接光照的反射作用，认为环境光是常量，没有考虑物体之间相互的反射光，物体间的反射光只用环境光表示。Phong光照模型属于简单光照模型。
更多内容见百科解释：Phong光照模型
四、还有feDistantLight和feSpotLight
最后再解释下平行光源和聚光光源，还是案例说话吧，对比下用在按钮上的效果。
代码的话这里就不展示了，想要了解，可以访问demo页面：SVG不同光源下的按钮滤镜demo
这是最终几个光源下的效果截图：
feDistantLight语法
feDistantLight表示远光，或者平行光，代表性的光源就是太阳。其支持两个参数值：
- azimuth
- 表示方位角。下图所示的是角度0和角度240时候，漫反射的光影效果图（应用图形是个圆形）。
- elevation
- 表示光源和照射物体平面照射的角度，例如太阳初升或日落可以看出是0，太阳当空就是90。下图示意的是照射高度角是0和45度时候（方位角使用默认的0，也就是从右往左照射）的效果：
feSpotLight语法
feSpotLight表示聚光光源，代表性的光源就是戏剧表演舞台上的聚光灯，手电筒也可以看成是聚光光源。
语法如下：
- x、y、z
- 光源坐标
- pointsAtX、pointsAtY、pointsAtZ
- 光源照射落点坐标。
- specularExponent
- 镜面指数属性，用来控制光源的焦点。值越大，灯光越亮。
- limitingConeAngle
- 表示聚光灯轴（即光源与其指向的点之间的轴）和聚光灯锥体之间的角度（以度为单位）。因此，它定义了一个限制锥，限制了光线投射的区域。锥体外没有光线投射。
以上所有数值，都可以配合SVG的<animate>, <set>元素实现动画效果。
五、反正我是弄懂了
好，基本上SVG光影相关的滤镜就上面这些了。
经过这些天的学习，我反正是弄懂了。
也为某些效果的实现提供了新的思路，例如卡牌元素呈现的时候，是不是可以使用聚光灯效果实现，就像电影开幕那样，绝对可以。
市面上很少见到这样的效果，是因为设计师和前端并不知道Web有这样的能力。
这毕竟属于视觉表现领域的深水区了。
学习其实就是这样，学得足够多，就会触类旁通，加深对过往知识的理解，并且自成体系。
即所谓的厚积薄发，量变产生质变。
不要等到需要用了，再去学，那就慢了，很多机会可能就这么错过了。
好，不展开哔哔了，就这样，感谢阅读。
就不要求大家分享了，毕竟小众领域。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11330
（本篇完）