CSS flood-color プロパティ
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
flood-color は CSS のプロパティで、<filter> 内の <feFlood> および <feDropShadow> 要素における、現在のフィルタープリミティブのサブ領域の色を定義します。存在する場合、この属性は要素の flood-color 属性よりも優先します。
メモ:
flood-color プロパティは、<svg> に含まれた <feFlood> および <feDropShadow> 要素にのみ適用されます。他の SVG 要素、HTML 要素、擬似要素には適用されません。
構文
/* <color> 値 */
flood-color: red;
flood-color: hsl(120deg 75% 25% / 60%);
flood-color: currentColor;
/* グローバル値 */
flood-color: inherit;
flood-color: initial;
flood-color: revert;
flood-color: revert-layer;
flood-color: unset;
値
公式定義
| 初期値 | black |
|---|---|
| 適用対象 | <feFlood> and <feDropShadow> elements in <svg> |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | by computed value |
形式文法
flood-color =
<color>
例
フィルターの塗りつぶしの色を定義
この例では、flood-color の基本的な用途と、CSS の flood-color プロパティが flood-color 属性よりも優先される仕組みについて説明しています。
HTML
SVG に 2 つの<filter> 要素があり、それぞれの要素に <feFlood> の子要素があります。それぞれの <feFlood> 要素には、SVG の flood-color 属性が含まれており、塗りつぶし色が seagreen として定義されています。また、filter 属性を持つ 2 つの <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;
}
次に、CSS の flood-color プロパティを使用して、<feFlood> 要素にさまざまな塗りつぶし色を適用します。ここでは名前付きの色と 3 桁の 16 進数表記を使用していますが、有効な CSS の色構文を使用することができます。
#flood1 feFlood {
flood-color: rebeccapurple;
}
#flood2 feFlood {
flood-color: #ff3366;
}
結果
属性では四角形の色をシーグリーンと定義していましたが、この値は CSS の flood-color の値によって上書きされました。
仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # FloodColorProperty |