什么是 CSS 中的泛光颜色和照明颜色定义？答案

【问题标题】：what's a flood-color and lighting-color definition in CSS?什么是 CSS 中的泛光颜色和照明颜色定义？
【发布时间】：2011-10-22 09:09:06
【问题描述】：

太酷了，我刚刚意识到 CSS 中有一个叫做 flood-color 和 lighting-color 的东西。有谁知道flood-color 和lighting-color 是什么，它们是做什么的？

这些到底是什么意思？：

'flood-color' 属性指示使用什么颜色来填充当前过滤器原始子区域。关键字 currentColor 和 ICC 颜色可以用相同的方式来指定 “填充”和“描边”属性的规范。

‘lighting-color’属性定义了光源的颜色用于滤镜基元“feDiffuseLighting”和“feSpecularLighting”。

我们如何应用这些所谓的 SVG 效果？我尝试将灯光颜色设置为红色，但似乎没有任何效果。

【问题讨论】：

标签： html css svg-filters

【解决方案1】：

这些是 SVG 滤镜效果。

‘lighting-color’属性定义了光源的颜色用于滤镜基元“feDiffuseLighting”和“feSpecularLighting”。

http://www.w3.org/TR/SVG/filters.html#LightingColorProperty

“flood-opacity”属性定义了要使用的不透明度值整个过滤器基元子区域。

http://www.w3.org/TR/SVG/filters.html#FloodColorProperty

【讨论】：

它们是否像背景渐变的 SVG 效果一样工作？或者更确切地说我们如何应用它？我尝试将它们设置为不同的有效颜色值，但没有一个显示任何形式的差异

【解决方案2】：

当我查找此规范时，该规范不是很有帮助。
试试https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content

您可以应用三种样式：您可以使用遮罩、剪辑路径或过滤器。

我唯一需要使用它的时候是我想使用 XOR 反转图形。

定义 SVG 过滤器：

<svg>
    <filter id="xor" x="0" y="0" width="100%" height="100%">
        <feFlood flood-color="#ff1493" result="flood"/>
        <feComposite operator="xor" in="SourceAlpha" in2="flood"/>
    </filter>
</svg>

使用 CSS 应用：

<style>
    .stylename{
        mask: url(#xor);
    }
</style>

【讨论】：