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- The svg has to be inline. I can't use a separate file or use an HTML
<svg>- 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- I can't use a
::before::afterAlready looked into a lot of avenues so here's what doesn't work:
- Using
fill='currentColor'<svg>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!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
