请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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)共同作用,形成镜面反射效果。
|