What's A Flood-color And Lighting-color Definition In Css?

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 exa

Solution 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

Solution 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><filterid="xor"x="0"y="0"width="100%"height="100%"><feFloodflood-color="#ff1493"result="flood"/><feCompositeoperator="xor"in="SourceAlpha"in2="flood"/></filter></svg>

Apply using CSS:

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