lighting-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月.
lighting-color CSS プロパティは、SVG の <filter> 内の SVG 照明フィルタープリミティブである <feDiffuseLighting> および <feSpecularLighting> の光源の色を定義します。指定された場合、要素の lighting-color 属性を上書きします。
メモ:
lighting-color プロパティは <svg> 内にある <feDiffuseLighting> と <feSpecularLighting> 要素にのみ適用されます。その他の SVG、HTML、擬似要素には適用されません。
構文
/* <color> 値 */
lighting-color: red;
lighting-color: hsl(120deg 75% 25% / 60%);
lighting-color: currentColor;
/* グローバル値 */
lighting-color: inherit;
lighting-color: initial;
lighting-color: revert;
lighting-color: revert-layer;
lighting-color: unset;
値
公式定義
| 初期値 | white |
|---|---|
| 適用対象 | <feDiffuseLighting> and <feSpecularLighting> elements in <svg> |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | by computed value |
形式文法
lighting-color =
<color>
例
フィルターの照明の色の定義
この例は、lighting-color の基本的な使用例と、CSS の lighting-color プロパティが lighting-color 属性よりも優先される仕組みを示しています。
HTML
SVG には 2 つの <filter> 要素があり、1 つは <feDiffuseLighting> を、もう1つは <feSpecularLighting> の子要素を含みます。それぞれに SVG の lighting-color 属性が含まれており、照明色を red と定義しています。これらの子要素の両方には、光源を設定する必須の子要素である <fePointLight> が含まれています。フィルター属性を設定した 2 つの <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,
#cccccc 0px 10px
);
}
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
次に、CSS の lighting-color プロパティを使用して、フィルターの子要素に異なる照明色値を適用します。名前付きカラーと 3 桁の 16 進カラーを使用していますが、有効な CSS カラー構文であれば何でも使用できます。
feDiffuseLighting {
lighting-color: blue;
}
feSpecularLighting {
lighting-color: #ff0099;
}
結果
両方の照明フィルターの色は属性で red と定義されていましたが、これらの値は CSS の lighting-color 値によって上書きされました。
仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # LightingColorProperty |