html - W3C Grayscale SVG Filters -
I'm trying to change the W3C greyscale filter found here:
This ridiculous on webkit It's simple, but I'm also using it only because Gecko only supports filtering through filters: url (filter.svg) in CSS. I do not have much experience with SVG, and many times I have messed with them, they were very clear in percentage, but it is a bit more complicated with grayscale.
So here's the code SVG file.
& lt; Svg xmlns = "http://www.w3.org/2000/svg" & gt; & Lt; Filter ID = "Grayscale" & gt; & Lt; FeColorMatrix Type = "Matrix" value = "0.3333 0.3333 0.3333 0 0.3333 0.3333 0.3333 0.3333 0.3333 0.3333 0 0 0 0 1 0" /> & Lt; / Svg & gt; In particular, I'm looking at it for grayscale up to 90%, so that only 10% of color is visible, but I do not know how this filter works. I found this document here which is considered to be understood
An easy way to do this is just to use The saturation type for FeColorMatrix (although the mathematics you want to calculate with is not that hard - if you can arithmetic, then you should be able to follow that device.)
& Lt; Svg xmlns = "http://www.w3.org/2000/svg" & gt; & Lt; Filter ID = "Grayscale" & gt; & Lt; FeColorMatrix type = "saturated" value = "0.10" /> & Lt; / Svg & gt;
Comments
Post a Comment