NO BUG: Cannot Fill SVG From CSS

Bugs
1

Browser: Chrome Version 120.0.6099.129 (Official Build) (arm64)
OS: macOS

I’m able to set the stoke of an SVG however the fill option doesn’t work?

My use case is when I hover over the parent container I want the SVG to change colour. This is working for the stroke as expected, but the fill refuses to work. See below for an example and my CSS code:

0a3ec674ddbe8fe1ce0108db7b88dc87bcb124eb
0a3ec674ddbe8fe1ce0108db7b88dc87bcb124eb2184×662 47.9 KB

You can see that the SVG’s stroke is showing as red which is coming from the CSS, however the fill hasn’t been applied. When you hover over the container the SVG’s stroke does turn blue, however it still doesn’t fill blue.

2

Hi @developadigital ,

As far as I know, every SVG has a different structure. Not every SVG element or SVG file may support the fill attribute.

If your SVG doesn’t support the fill attribute, you will not get any effect even if it’s added.

Can you please share your SVG file here?

Regards,
Jenn

1 Like
3

Upon reviewing the SVG it had to be changed to “fill=currentColor”

1 Like