SVG currentColor do not inherit from parent division when created from CSS

Asked Feb 24 '20 at 19:19

Active Feb 24 '20 at 19:19

Viewed 672 times

I try to integrate a SVG from a CSS file with the following code:

.circle:before {
    content: url('data:image/svg+xml;charset=UTF-8, <svg width="100" height="100" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/></svg>');
}

<div style="color:red; fill:blue;">
    <div class="circle"></div>
    <svg width="100" height="100" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/></svg>
</div>

I can't figure out why the color is applied when the SVG is inserted in the HTML and is not applied when the SVG is created from the CSS?

asked Feb 24 '20 at 19:19

Fifi

3,360
2
27
53

1

when used inside CSS it's like using iframe. It cannot interact with anything from the outside – Temani Afif Feb 24 '20 at 19:22
You can set color from outside Font awesome icons. How they do? – Fifi Feb 24 '20 at 19:24
1

font Awesome aren't embeded that way using url. They are either used as font or the SVG is added to the code – Temani Afif Feb 24 '20 at 19:24
related: https://stackoverflow.com/a/48608619/8620333 – Temani Afif Feb 24 '20 at 19:25
1

And https://stackoverflow.com/questions/30538325/svg-display-difference-between-img-and-object/30538817#30538817 - specifically no external dependencies for SVG used as an image and CSS content counts as an image. – Robert Longson Feb 24 '20 at 19:32
OK. I see, what is the best alternative? I still do not understand how Font Awesome works. – Fifi Feb 24 '20 at 19:35
FontAwesome turns the SVGs into a font. So it's just like displaying any other text. – Paul LeBeau Feb 25 '20 at 12:58

SVG currentColor do not inherit from parent division when created from CSS

0 Answers0