Menu
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.
261
You can use fill="currentColor" . Show activity on this post. 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.
You're largely limited to a single color with icon fonts in a way that SVG isn't, but still, it is appealingly easy to change that single color with color . Using inline SVG allows you to set the fill , which cascades to all the elements within the SVG, or you can fill each element separately if needed.
Note: As a presentation attribute, color can be used as a CSS property. See CSS color for further information. As a presentation attribute, it can be applied to any element, but as noted above, it has no direct effect on SVG elements.
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"
57
You can use fill="currentColor".
<a href="#" style="color:red"> <svg fill="currentColor"> ...</svg> </a> 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
