<feSpecularLighting>

Базовая поддержка Широко доступно *

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

* Некоторые части этой функции могут поддерживаться в разной степени.

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

Этот элементарный примитив фильтра создаёт изображение, содержащее зеркальную составляющую расчёта освещения. Такую карту предполагается объединять с текстурой с помощью add терма арифметического метода <feComposite>. Несколько источников света можно имитировать, сложив несколько таких карт освещения перед их применением к изображению текстуры.

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

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

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

Атрибуты

Интерфейс DOM

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

Пример

<svg
  height="200"
  width="200"
  viewBox="0 0 220 220"
  xmlns="http://www.w3.org/2000/svg">
  <filter id="filter">
    <feSpecularLighting
      result="specOut"
      specularExponent="20"
      lighting-color="#bbbbbb">
      <fePointLight x="50" y="75" z="200" />
    </feSpecularLighting>
    <feComposite
      in="SourceGraphic"
      in2="specOut"
      operator="arithmetic"
      k1="0"
      k2="1"
      k3="1"
      k4="0" />
  </filter>
  <circle cx="110" cy="110" r="100" filter="url(#filter)" />
</svg>

Результат

Спецификации

Спецификация
Модуль эффектов фильтров, уровень 1> # feSpecularLightingElement>

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`feSpecularLighting`	5	12	3	9	6	18	4	10.1	6	1.0	4.4	6
`in`	5	12	3	9	6	18	4	10.1	6	1.0	4.4	6
`kernelUnitLength`	45	79	3	32	17.4	45	4	32	17.4	5.0	45	17.4
`specularConstant`	5	12	3	9	6	18	4	10.1	6	1.0	4.4	6
`specularExponent`	5	12	3	9	6	18	4	10.1	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/feSpecularLighting