--- theme: condensed-night-purple highlight: a11y-dark --- # 前言本篇文章将介绍`SVG`的光源滤镜。包括：用来描述光源反射方式的`feDiffuseLighting` 和 `feSpecularLighting`，以及用来描述光源的 `fePointLight`、`feDistantLight`、`feSpotLight`。并且将会通过一些实际的使用案例来详细说明。 # 人为什么能看到光首先，在介绍和使用这些滤镜的时候，我们需要明白一个原理。**人为什么能够看到东西？** 在现实生活中，太阳发出的光照射到物体上，被照射的物体会吸收一部分光，并将剩余的光反射出去。人的眼睛接受到物体反射来的光，经过大脑的处理最终让人能看到这个物体。随着计算机的发展，现在可以在计算机中模拟实现这种光照和反射的效果，在SVG中也有对应的实现。下面将逐一介绍`SVG`中模拟光照的这些滤镜。 # 用 SVG 模拟光 `SVG`中是如何实现对光的模拟的，确实比较复杂，可以查看`W3C`给出的`SVG`文档。如何实现的本文将不过多赘述，如果有感兴趣的可自行了解。这里给出文档链接。[feSpecularLighting](https://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement)和[feDiffuseLighting](https://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement) 本文将着重介绍在`SVG`中光源滤镜的使用，会先介绍基本的使用，再逐一介绍每个滤镜的属性。介绍的滤镜分类如下光照反射滤镜： - feDiffuseLighting 漫反射滤镜 - feSpecularLighting 镜面反射滤镜光源滤镜： - fePointLight 点光源 - feDistantLight 距离光源 - feSpotLight 聚光灯光源 ## 如何定义定义一个光照滤镜，需要指定以下几个因素 1. 被照射的几何物体 2. 光照反射类型 3. 光的颜色 4. 光照源被照射的几何物体的确认是在指定滤镜的时候通过`光照反射滤镜`指定 `in` 属性传入 `SourceGraphic`来确认的。光照反射类型就是所用的`光照反射滤镜`，光的颜色通过定义`光照反射滤镜`的`lighting-color`属性，光源需要在`光照反射滤镜`内定义`光源滤镜`。这里只是定义了光照，如果需要作用于物体上的效果。需要通过`feComposite`进行图形合成。具体的使用如下 ## 简单使用 ### feDiffuseLighting 漫反射滤镜 > 滤镜光照一个图像，使用 alpha 通道作为隆起映射。结果图像，是一个 RGBA 不透明图像，取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。 > 滤镜制造的光映射可以与一个纹理图像组合，使用`feComposite`滤镜的多重`arithmetic 操作。在应用纹理图案之前合加多个光映射可以模拟多重光源。` 简单使用： ``` html ``` 效果如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f08f60a6dd19448cbdbaddd4874f4ca8~tplv-k3u1fbpfcp-watermark.image?) ### feSpecularLighting 镜面反射滤镜 > 该滤镜照亮一个源图形，使用 alpha 通道作为隆起映射。该结果图像是一个基于光色的 RGBA 图象。该光照计算遵守标准[冯氏照明模式](http://en.wikipedia.org/wiki/Phong_reflection_model)的镜面组件。结果图像依赖于光色、光的位置以及输入隆起映射的表面几何形状。光照计算的结果是叠加的。该滤镜假定观察者在 X 方向无穷远处。 > 该滤镜制作了一个图像，图像包含光照计算的镜面反射部分。如此一个映射是为了与纹理相结合，使用算术`feComposite`方法的叠加。利用在应用到纹理图像前添加多个光映射，可以模拟多个光源。 ```html ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/beb8c8ca37ad4a2cabe16285279a09e1~tplv-k3u1fbpfcp-watermark.image?) ## feDiffuseLighting 与 feSpecularLighting 的异同相同点： 1. 都是基于使用 alpha 通道作为隆起映射。说人话就是最后的纹理使用 rbga 四个通道值计算获得 2. 光的颜色都需要通过光照滤镜的 `lighting-color` 属性来定义 3. 在光照滤镜的内部定义光源，且只能容纳一个光源元素不同点： 1. `feDiffuseLighting` 的 alpha 值固定为 1 2. `feDiffuseLighting` 中未被光照射到的地方呈现黑色。`feSpecularLighting`未被光照射到的地方呈现透明 # 滤镜属性下面将着重介绍这些滤镜的专有属性，以及通过这些属性可做到的一些效果。 ## 光照反射滤镜 ### **surfaceScale** surfaceScale 定义图形基底的高度。可以用来控制图形与光源的距离 `feSpecularLighting`和`feDiffuseLighting`都可以使用可填任意数字，默认值为1 例子：在不同光照滤镜下的表现 ``` html ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0db396c4623488bb1acde75412bc303~tplv-k3u1fbpfcp-watermark.image?) ### **diffuseConstant** diffuseConstant 控制漫反射强度。值越大，漫反射强度也越大，从图像结果来看，亮度越高。 `feDiffuseLighting`可以使用可填任意正数，默认值为1 例子： ```html ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/acc74a820fd5425c999010399004ada8~tplv-k3u1fbpfcp-watermark.image?) ### **specularConstant** specularConstant 控制镜面反射率。值越高，镜面反射越明显。从图像结果来看，值越高颜色越接近原色，越低颜色越白（无论原图像和光的颜色是什么） `feSpecularLighting`可以使用可填任意正数，默认值为1 例子： ```html ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecef871fa7d244cca87a80aa5de4cf42~tplv-k3u1fbpfcp-watermark.image?) ### **specularExponent** specularExponent 控制光源的焦点。从最后图像的焦点来看，值越大图形越亮。 `feSpecularLighting`可以使用可填任意大于1的数，默认值为1 例子： ``` html ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a57b15058d5476f94e25e3e26f2dde6~tplv-k3u1fbpfcp-watermark.image?) ## 光源滤镜 ### fePointLight 点光源属性： - `x`: 光源点的 x 坐标（默认值：0） - `y`: 光源点的 y 坐标（默认值：0） - `z`: 光源点的 z 坐标（默认值：1）这里需要注意的一点是 `z` 确定了光源点在坐标系中 z 方向的值。这个值并不能代表光源点距离图形的距离。具体的距离是需要通过点光源属性 z 与光照属性 surfaceScale 计算得出。两者之间的距离 = 点光源属性 z - 光照属性 surfaceScale 这里 z - surfaceScale 的值的大小最终决定最后光源的高度，具体的表现如下例子： ```html ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb01097642764bbbaaeb3af3b8d1d501~tplv-k3u1fbpfcp-watermark.image?) 总结： - 距离为正值：`feDiffuseLighting`光照部分呈现光源色。`feSpecularLighting`光照部分呈现原色。 - 距离为 0：`feDiffuseLighting`图形没有受到光照，全黑。`feSpecularLighting`图形没有受到光照，呈现原色。 - 距离为负值：`feDiffuseLighting`图形没有受到光照，全黑。`feSpecularLighting`受到负方向光照源光照，光照部分呈现白色。 ### feDistantLight 距离光源属性： - azimuth: 方位角（默认值：0） - elevation: 高度（默认值：0）例子：azimuth与elevation ```html ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0aa361e8d807446b8e35126afc0d6e39~tplv-k3u1fbpfcp-watermark.image?) ### feSpotLight 聚光灯光源 - `x`: 光源点的 x 坐标（默认值：0） - `y`: 光源点的 y 坐标（默认值：0） - `z`: 光源点的 z 坐标（默认值：1） - `pointsAtX`: 光源照射点的 x 坐标 (默认值：0) - `pointsAtY`: 光源照射点的 y 坐标 (默认值：0) - `pointsAtZ`: 光源照射点的 z 坐标 (默认值：0) - `specularExponent`: 控制光源的焦点, 光照边界越模糊(默认值：1)。表现为：`feDiffuseLighting` 内，值越大，图像越暗。`feSpecularLighting`内，值越大，图像越亮。 - `limitingConeAngle`：光的投射角，值越大，光照范围越大(默认值：0) 例子： ```html

红色点为光源点

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9db558aca0274d1ca83c72a9e0c576a4~tplv-k3u1fbpfcp-watermark.image?) # 光照滤镜的应用 ## 通过光照给图像不同的颜色我买可以通过光照滤镜，来给白色的图形或者图片，动态变换不同的颜色。这里采用的是`feDiffuseLighting` + `feSpotLight` 来实现的例子：让白色的圆变成绿色 ```html ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1800817a1124662beb02f2e4c176125~tplv-k3u1fbpfcp-watermark.image?) 这时有人可能就要问了，直接设置fill属性不就好了吧，干嘛要多此一举。因为它最重要的一个特点是，滤镜可作用于图片。只要是白色图形的图片都可以利用滤镜来更换颜色。非常好用。特别的，如果图片有不透明度的颜色区域，光照滤镜也能很好的表现出来。例子：将png图片变换颜色 ```html ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8671ec3d0f4a496ab3901d105f9a11c9~tplv-k3u1fbpfcp-watermark.image?) ## 制作闪烁效果在上一个应用的基础上添加动画，我们就能得到一个类似闪烁的效果。 ```html ``` ![twinkle.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5b62e7b381d4aa3b323615fd3f920d2~tplv-k3u1fbpfcp-watermark.image?) ## 聚光灯入场效果同样的，也是`feSpotLight`的应用。通过控制照射点及投射角度来模拟聚光灯入场的效果。 ```html ``` ![lightMe.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/802053dc486c44129ba11900b37ddfde~tplv-k3u1fbpfcp-watermark.image?) # 最后文章中如果有什么不对的地方，欢迎在评论区里指正。 **参考资料** [参考来源 - MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG) **往期文章** > [踏足SVG | 深入浅出全方位介绍SVG的功能及特性 - 基础篇](https://juejin.cn/post/7062265574927106079) > [踏足SVG 深入浅出全方位介绍SVG的功能及特性 - 滤镜篇（一）](https://juejin.cn/post/7075205420666585095) > [踏足SVG 深入浅出全方位介绍SVG的功能及特性 - 滤镜篇（二）](https://juejin.cn/post/7081906485357690887)