漫反射光照滤镜

前端教程SVG

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

基本语法

<filter id="pointLight">
  <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white" surfaceScale="1" diffuseConstant="1">
    <fePointLight x="150" y="60" z="20" />
  </feDiffuseLighting>
</filter>
<filter id="distantLight">
  <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
    <feDistantLight azimuth="240" elevation="20"/>
  </feDiffuseLighting>
</filter>
<filter id="spotLight">
  <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
    <feSpotLight x="360" y="5" z="30" limitingConeAngle="20" pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
  </feDiffuseLighting>
</filter>

• light-color：光的颜色
• surfaceScale：输入图形表面的高度，默认 1；
• diffuseConstant：冯氏光照模型漫反射公式中的 kd 值，默认 1，非负值；
• <fePointLight> 点光源
  • x,y 光的位置
  • z 光的高度
• <feDistantLight> 平行光
  • azimuth：光源在 XY 平面的方向角度值（顺时针，相对于 X 轴），默认 0，范围 0~360；
  • elevation：光源从XY平面到 Z 轴的方向角度，默认 0，范围 0~360。
• <feSpotLight> 聚光灯
  • x,y,z 光源的位置和高度
  • pointsAtX, pointsAtY, pointsAtZ：光源所指向的点的坐标位置
  • specularExponent：控制光源的焦点。值越大，光越亮，默认 1。
  • limitingConeAngle：圆锥体的角度，决定聚光灯的光照范围，默认 0。

<fePointLight> 示例

• 红点表示光的位置，

新窗口打开

<feDistantLight> 示例

• 调整 azimuth 的值，改变光的方向
• 调整 elevation 的值，改变光的高度

新窗口打开

<feSpotLight> 示例

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

新窗口打开