<feDiffuseLighting>
<feDiffuseLighting> SVG 濾鏡基元使用 Alpha 通道作為凹凸貼圖來照亮影像。生成的影像（一個 RGBA 不透明影像）取決於光源顏色、光源位置和輸入凹凸圖的表面幾何形狀。
此濾鏡基元生成的亮度圖可以使用 <feComposite> 濾鏡基元的 arithmetic 運算子的乘法項與紋理影像結合。可以透過將多個亮度圖相加，然後再將其應用於紋理影像來模擬多個光源。
與其它濾鏡圖元一樣，它預設在 linearRGB 顏色空間中處理顏色分量。您可以使用 color-interpolation-filters 屬性改為使用 sRGB。
使用語境
屬性
DOM 介面
此元素實現了 SVGFEDiffuseLightingElement 介面。
示例
以下示例顯示了 <feDiffuseLighting> 元素對帶有可用光源的圓形的影響。每次，光源都來自左上角。
html
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">
<!-- No light is applied -->
<text text-anchor="middle" x="60" y="22">No Light</text>
<circle cx="60" cy="80" r="50" fill="green" />
<!-- the light source is a fePointLight element -->
<text text-anchor="middle" x="170" y="22">fePointLight</text>
<filter id="lightMe1">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<fePointLight x="150" y="60" z="20" />
</feDiffuseLighting>
<feComposite
in="SourceGraphic"
in2="light"
operator="arithmetic"
k1="1"
k2="0"
k3="0"
k4="0" />
</filter>
<circle cx="170" cy="80" r="50" fill="green" filter="url(#lightMe1)" />
<!-- the light source is a feDistantLight element -->
<text text-anchor="middle" x="280" y="22">feDistantLight</text>
<filter id="lightMe2">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<feDistantLight azimuth="240" elevation="20" />
</feDiffuseLighting>
<feComposite
in="SourceGraphic"
in2="light"
operator="arithmetic"
k1="1"
k2="0"
k3="0"
k4="0" />
</filter>
<circle cx="280" cy="80" r="50" fill="green" filter="url(#lightMe2)" />
<!-- the light source is a feSpotLight source -->
<text text-anchor="middle" x="390" y="22">feSpotLight</text>
<filter id="lightMe3">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<feSpotLight
x="360"
y="5"
z="30"
limitingConeAngle="20"
pointsAtX="390"
pointsAtY="80"
pointsAtZ="0" />
</feDiffuseLighting>
<feComposite
in="SourceGraphic"
in2="light"
operator="arithmetic"
k1="1"
k2="0"
k3="0"
k4="0" />
</filter>
<circle cx="390" cy="80" r="50" fill="green" filter="url(#lightMe3)" />
</svg>
預期渲染
即時渲染
規範
| 規範 |
|---|
| 濾鏡效果模組第 1 級 # feDiffuseLightingElement |
瀏覽器相容性
載入中…