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 |
浏览器兼容性
加载中…