what's a flood-color and lighting-color definition in CSS?

Question

Way cool, i'd just realised there is something called flood-color and lighting-color in CSS. Does anyone know what is a flood-color and lighting-color and what do they do?

What exactly do these mean?:

The ‘flood-color’ property indicates what color to use to flood the current filter primitive subregion. The keyword currentColor and ICC colors can be specified in the same manner as within a specification for the ‘fill’ and ‘stroke’ properties.

The ‘lighting-color’ property defines the color of the light source for filter primitives ‘feDiffuseLighting’ and ‘feSpecularLighting’.

How do we apply these so-called SVG effects? I've tried setting the lighting-color to red but there doesn't seem to be any effect whatsoever.

Answer 1

These are SVG filter effects.

The ‘lighting-color’ property defines the color of the light source for filter primitives ‘feDiffuseLighting’ and ‘feSpecularLighting’.

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

The ‘flood-opacity’ property defines the opacity value to use across the entire filter primitive subregion.

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

Answer 2

The spec wasn't very helpful when I looked this up.
Try https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content

There are three styles you may apply: you may use mask, clip-path, or filter.

The only time I've ever needed to use this was when I wanted to invert graphics using XOR.

Define the SVG filter:

<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>

Apply using CSS:

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