svg : 光滤镜（二）

马黑黑 · 发表于 2023-10-21 11:47

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

feSpecularLighting 镜面反射滤镜

feSpecularLighting 是镜面反射滤镜，它与 feDiffuseLighting 漫射反射滤镜一样，都是基于 alpha 通道实现隆起映射，且光的颜色也是通过光照滤镜的 lighting-color 属性来决定。不同的是，镜面反射滤镜所作用的对象，在光照不到的地方呈现透明。

同样的，镜面反射滤镜也需要光源，本讲仍以点光源 fePointLight 滤镜作为子光源滤镜，先来看看代码：

<feSpecularLighting in="SourceGraphic" surfaceScale="3" lighting-color="red" result="light">
	<fePointLight x="50" y="50" z="10" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="light" operator="out" />

这里，镜面反射滤镜的 surfaceScale 属性用来定义图形基底的高度，通过它可以控制光源与图形的距离，默认值为 1，可以根据需要任意设置，feSpecularLighting 和 feDiffuseLighting 滤镜都可以使用。result="light" 的光滤镜组使用 feComposite 进行合成处理，将其（in2="light"）对输入源即作用对象图形（in="SourceGraphic"）进行剪切，形成最终效果。下面的完整演示实例，滤镜作用于第一个圆，第二个圆土生土长没加滤镜：

<svg width="400" height="200" style="border: 1px solid gray;">
	<filter id="f">
		<feSpecularLighting in="SourceGraphic" surfaceScale="3" lighting-color="red" result="light">
			<fePointLight x="50" y="50" z="10" />
		</feSpecularLighting>
		<feComposite in="SourceGraphic" in2="light" operator="out" />
	</filter>

	<circle cx="100" cy="100" r="90" fill="green" filter="url(#f)"></circle>
	<circle cx="300" cy="100" r="90" fill="green"></circle>
</svg>

上例的效果中，点光源的光照在 {50,50} 处，呈现出白色，说明 lighting-color="red" 设置不起作用——这与合成滤镜的 operator="out"有关。光点之外就是光未照到的地方，呈现出一定程度的透明度，与底色（green）共同作用，形成镜面反射效果。