flood-color

Базовая информация Широко доступно

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

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

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

Синтаксис

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

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

Значения

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

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

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

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

flood-color = 
  <color>

Примеры

Определение цвета заливки фильтра

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

HTML

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

<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood flood-color="seagreen" />
  </filter>
  <filter id="flood2">
    <feFlood flood-color="seagreen" />
  </filter>

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

CSS

Мы определяем размеры и положение наших <rect> с помощью свойств CSS height, width, x и y:

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

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

#flood1 feFlood {
  flood-color: rebeccapurple;
}
#flood2 feFlood {
  flood-color: #f36;
}

Результаты

Атрибуты определили квадраты как seagreen, но эти значения были переопределены значениями CSS flood-color.

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

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

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`flood-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/flood-color