Menu
Is there a way to invert a white image to black using SVG filters?
In CSS Filter, we do -webkit-filter:invert(1); which does not work in IE10. I am applying SVG filters as fallback. Any one can help?
302
Edit your SVG file, add fill="currentColor" to svg tag and make sure to remove any other fill property from the file. Note that currentColor is a keyword (not a fixed color in use). After that, you can change the color using CSS, by setting the color property of the element or from it's parent.
SVG is an open-standard XML format for two-dimensional vector graphics as defined by the World Wide Web Consortium (W3C). A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified bitmapped result. Filter effects are defined by filter elements.
The CSS invert() function is used with the filter property to invert the samples in an image. The invert() function requires an argument to be passed to it. This argument determines the proportion of the conversion that's applied to the image. The argument can be either a percentage value or a number .
CSS | invert() Function The invert() function is an inbuilt function that is used to apply a filter to the image to set the invert of the color of the sample image.
You can invert using an SVG Filter:
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0"/>
For more detail see the docs on feColorMatrix at MDN
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
