How do I have an SVG image inherit colors from the HTML document?
51,260
Solution 1
HTML uses color whereas SVG uses fill and stroke. You can get fill or stroke to use the value of the color CSS property by using the value currentColor
e.g. fill="currentColor"
Solution 2
You can use fill="currentColor"
.
<a href="#" style="color:red">
<svg fill="currentColor"> ...</svg>
</a>
Solution 3
Define the fill:
of the whole SVG as currentColor
in the CSS:
svg {
fill: currentColor;
}
This makes the whole SVG to inherit the normal CSS color:
of the surrounding element. Just make sure that all SVG child elements don't have any fill
defined.
Related videos on Youtube
Author by
user1762639
Updated on May 01, 2022Comments
-
user1762639 about 2 years
I have a bunch of SVG images that I want to embed in an HTML page, which is styled with CSS.
I want to be able to have elements in the SVG have their color inherited from the parent HTML element's color attribute.
I tried setting
style="stroke: none; fill: inherit"
but this doesn't work.-
Stan over 11 yearsTake a look at SVG parameters: schepers.cc/w3c/svg/params/ref.html
-
Erik Dahlström over 11 yearsYour question isn't clear on how you embed the svg fragments. Sounds a bit like stackoverflow.com/questions/4906148/… though. Anyway, if your fragments are inline in the html, then styling like in your example should work fine.
-
-
obskyr almost 10 yearsThis doesn't work with embedded SVGs, though, does it?
-
Robert Longson almost 10 yearsIt does, but it isn't cross-document if that's what you mean.