lighting-color
lighting-color CSS 屬性定義了 SVG <filter> 中 <feDiffuseLighting> 和 <feSpecularLighting> SVG 光照濾鏡原語的光源顏色。如果存在，它會覆蓋元素的 lighting-color 屬性。
注意： lighting-color 屬性僅適用於巢狀在 <svg> 中的 <feDiffuseLighting> 和 <feSpecularLighting> 元素。它不適用於其他 SVG、HTML 或偽元素。
語法
css
/* <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;
值
正式定義
| 初始值 | white |
|---|---|
| 應用於 | <feDiffuseLighting> 和 <feSpecularLighting> 元素在 <svg> 中 |
| 繼承性 | 否 |
| 計算值 | 同指定值 |
| 動畫型別 | 由計算值 |
正式語法
lighting-color =
<color>
示例
定義濾鏡光照的顏色
此示例演示了 lighting-color 的基本用例，以及 CSS lighting-color 屬性如何優先於 lighting-color 屬性。
HTML
我們有一個 SVG，其中包含兩個 <filter> 元素，一個帶有 <feDiffuseLighting> 子元素，另一個帶有 <feSpecularLighting> 子元素。每個都包含 SVG lighting-color 屬性，將光照顏色定義為 red。這兩個子元素都帶有一個 <fePointLight>，這是設定光源的必需子元素。我們包含了兩個帶有濾鏡屬性的 <rect> 元素；這是濾鏡將顯示的位置。
html
<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
我們使用 CSS height、width、x 和 y 屬性定義 <rect> 的大小和位置。我們還在 SVG 中添加了一個背景影像，以使任何顏色 alpha 透明度更明顯。
css
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 屬性將不同的光照顏色值應用於濾鏡的子元素。我們使用了命名顏色和三位十六進位制顏色，但我們可以使用任何有效的 CSS 顏色語法。
css
feDiffuseLighting {
lighting-color: blue;
}
feSpecularLighting {
lighting-color: #ff0099;
}
結果
屬性將兩個光濾鏡的顏色定義為 red，但這些值被 CSS lighting-color 值覆蓋了。
規範
| 規範 |
|---|
| 濾鏡效果模組第 1 級 # LightingColorProperty |
瀏覽器相容性
載入中…