lighting-color

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

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

Свойство lighting-color CSS определяет цвет источника света для примитивов фильтра освещения <feDiffuseLighting> и <feSpecularLighting> в SVG <filter>. При наличии, оно переопределяет атрибут элемента lighting-color.

Примечание: Свойство lighting-color применяется только к элементам <feDiffuseLighting> и <feSpecularLighting>, вложенным в <svg>. Оно не применяется к другим элементам SVG, HTML или псевдоэлементам.

Синтаксис

/* <color> values */
lighting-color: red;
lighting-color: hsl(120deg 75% 25% / 60%);
lighting-color: currentcolor;

/* Global values */
lighting-color: inherit;
lighting-color: initial;
lighting-color: revert;
lighting-color: revert-layer;
lighting-color: unset;

Значения

<color>: Цвет освещения. Это может быть любое допустимое значение CSS <color>.

Формальное определение

Значение не найдено в базе данных!

Формальный синтаксис

lighting-color = 
  <color>

Примеры

Определение цвета освещения фильтра

В этом примере показано базовое использование lighting-color, и как свойство CSS lighting-color имеет приоритет над атрибутом lighting-color.

HTML

У нас есть SVG с двумя элементами <filter>, один с <feDiffuseLighting> и один с <feSpecularLighting> дочерним элементом. Каждый включает атрибут SVG lighting-color, определяющий цвет освещения как red. Оба этих дочерних элемента имеют <fePointLight>, необходимый дочерний элемент, который устанавливает источник света. Мы включили два элемента <rect> с атрибутом фильтра; здесь будут отображаться фильтры.

<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feDiffuseLighting lighting-color="red">
      <fePointLight x="75" y="30" z="10" />
    </feDiffuseLighting>
  </filter>
  <filter id="flood2">
    <feSpecularLighting specularExponent="5" lighting-color="red">
      <fePointLight x="225" y="75" z="5" />
    </feSpecularLighting>
  </filter>

  <rect id="r1" filter="url(#flood1)" />
  <rect id="r2" filter="url(#flood2)" />
</svg>

CSS

Мы определяем размер и положение нашего <rect> с помощью свойств CSS height, width, x и y. Мы также добавляем изображение фона в SVG, чтобы сделать любые цветовые альфа-прозрачности более заметными:

svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #ccc 0px 10px
  );
}

rect {
  width: 100px;
  height: 100px;
  x: 10px;
  y: 10px;
}

#r2 {
  x: 150px;
}

Затем мы применяем различные значения цвета освещения к дочерним элементам фильтра с помощью свойства CSS lighting-color. Мы используем имя цвета и 3-значный шестнадцатеричный цвет, но можем использовать любой допустимый синтаксис цвета CSS:

feDiffuseLighting {
  lighting-color: blue;
}

feSpecularLighting {
  lighting-color: #f09;
}

Результаты

Атрибуты определили цвет обоих фильтров освещения как red, но эти значения были переопределены значениями CSS lighting-color.

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`lighting-color`	5	12	3	15	6	18	4	14	6	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/lighting-color