Change color of css 'inline svg' dynamically
Hi! I've been tearing my hair out with this for a while now.
I have an css inline svg which I want to change the fill color off dynamically in css. The codepen is here: https://codepen.io/stefanh-at/pen/QWJGZKd
Some restrictions I have for this:
- I can't use filter because the
- The svg has to be inline. I can't use a separate file or use an HTML
- I need to be able to change the fill color of the icon using either css custom properties or
- I can't use a
- I can't use a
Already looked into a lot of avenues so here's what doesn't work:
- Using
Yeah this is quite the restricting case but if there is some way which I've missed to recolor the svg, this would all be solved.
Hope someone can help!
I have an css inline svg which I want to change the fill color off dynamically in css. The codepen is here: https://codepen.io/stefanh-at/pen/QWJGZKd
Some restrictions I have for this:
- I can't use filter because the
background-color can't change and i have children which can't change either- The svg has to be inline. I can't use a separate file or use an HTML
<svg> tag- I need to be able to change the fill color of the icon using either css custom properties or
currentColor- I can't use a
clip-path to cut out the background since I need to put another icon in a different (dynamic) location- I can't use a
::before or ::after pseudo elementAlready looked into a lot of avenues so here's what doesn't work:
- Using
fill='currentColor' doesn't work. This only applies to <svg> tags which I can't use in my markupYeah this is quite the restricting case but if there is some way which I've missed to recolor the svg, this would all be solved.
Hope someone can help!
