Change svg fill color
Hi guys, I would like to know is there some solution for changing svg fill color. I render the svg from strapi (and using astro.js) using object tag in react.js. After rendering the image I can see the svg when inspecting, and I can change the fill color in inspect, but not in css file. I've tried everything that I found, but it's not working. I read that it is difficult to override the fill color for svgs that coming from external source. i would like to know if anyone has any ideas how to solve this issue. Thank you
11 Replies
Does the SVG have a fill attribute on the code itself? It's pretty much impossible to override an inlined fill attribute with CSS
Yes it has
Styles in Astro are scoped by default. Have you tried making it a global style?
I didn't even notice it was Astro. They're right. No matter what, unless you make the svg tag global, it will not work
I would try making it global first, then removing the fill attribute
So
.parent :global(svg)
Or path instead of svg depending on how your svg isI didn't try this
I tried this one, with svg and path also, but it didn't work. Here are the images from my code. If I change the color in inspect, the image is changing the color. Also I use client:visible directive from astro.js when rendering the component
Thank you guys, I solved the problem
I was going to say anyway, notice that path also had a fill attribute? It would prevent the SVG from changing colors anyway
Glad you solved it though π
The solution was simple, I added additional class in the object tag, and then in the css file I simply played around with the filter property in order to get the appropriate color
You're using the filter property to change the color?? I guess that's one way....π
That one worked, I believe there can be other options too π