<feDiffuseLighting>

Базовый уровень Широко доступно

Эта функция хорошо зарекомендовала себя и работает во многих устройствах и версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015⁩ года.

Примитив фильтра <feDiffuseLighting> SVG освещает изображение, используя альфа-канал в качестве карты рельефа. Результирующее изображение, представляющее собой непрозрачное изображение RGBA, зависит от цвета и положения источника света, а также от геометрии поверхности входной карты рельефа.

Карту освещения, созданную этим примитивом фильтра, можно объединить с текстурным изображением, используя операцию умножения оператора arithmetic примитива фильтра <feComposite>. Несколько источников света можно имитировать, сложив несколько таких карт освещения перед их применением к текстурному изображению.

Как и другие примитивы фильтров, по умолчанию он обрабатывает компоненты цвета в цветовом пространстве linearRGB. Чтобы вместо этого использовать sRGB, можно задать color-interpolation-filters.

Контекст использования

Категории	Элемент примитива фильтра
Допустимое содержимое	Любое количество описательных элементов и ровно один элемент источника света в любом порядке.

Атрибуты

Интерфейс DOM

Этот элемент реализует интерфейс SVGFEDiffuseLightingElement.

Пример

В следующем примере показан эффект элемента <feDiffuseLighting> для круга с каждым из доступных источников света. Во всех случаях свет исходит из верхнего левого угла.

<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>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`feDiffuseLighting`	5	12	3	15	6	18	4	14	6	1.0	4.4	6
`diffuseConstant`	5	79	3	15	6	18	4	14	6	1.0	4.4	6
`in`	5	12	3	15	6	18	4	14	6	1.0	4.4	6
`kernelUnitLength`	5	79	3	15	6	18	4	14	6	1.0	4.4	6
`surfaceScale`	5	79	3	15	6	18	4	14	6	1.0	4.4	6

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting