<feDiffuseLighting>

<feDiffuseLighting> SVG 濾鏡基本元素使用 alpha 通道作為凹凸貼圖來照亮影像。生成的影像（它是 RGBA 不透明影像）取決於輸入凹凸貼圖的光顏色、光位置和表面幾何形狀。

此濾鏡基本元素生成的光照貼圖可以使用 <feComposite> 濾鏡基本元素的 arithmetic 運算子的乘法項與紋理影像組合。可以透過在將多個光照貼圖應用於紋理影像之前將它們加在一起來模擬多個光源。

使用上下文

類別濾鏡基本元素
允許的內容任意數量的 描述性元素 和恰好一個 光源元素，順序任意。

屬性

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>

預期渲染

Expected rendering for the example

即時渲染

規範

規範
濾鏡效果模組級別 1
# feDiffuseLightingElement

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱