镜面高光滤镜

前端教程SVG

<feSpecularLighting> 镜面高光滤镜使用 <fePointLight> 点光源、<feDistantLight> 平行光、<feSpotLight> 聚光灯来产生一个镜面反射光照贴图（light map）。内部原理是冯氏光照模型中的镜面高光，更多参考：知乎 - 冯氏光照模型。

基本语法

<filter id = "filter">
    <feSpecularLighting lighting-color="#bbbbbb" specularExponent="20" specularConstant="1">
        <fePointLight 或 feDistantLight 或 feSpotLight ..../>
    </feSpecularLighting>
</filter>

• lighting-color：光的颜色
• surfaceScale：输入图形表面的高度，默认 1；
• specularConstant：控制镜面反射比率，是冯氏光照模型公式中的 ks 值，默认 1
• specularExponent：控制光源的焦点。值越大，光越亮，默认 1

<fePointLight> 示例

• 红点表示光的位置

新窗口打开

<feDistantLight> 示例

新窗口打开

<feSpotLight> 示例

• 红点表示光的位置
• 蓝点表示光照向的位置，红线就是光照的方向了

新窗口打开