Group Not Filling on SVG

Submitted by Maxibon on April 29, 2025
So I am having issues with an SVG map I am making where a group of paths isn't filling when correct or incorrect, even though they have a common colour. This group is like the mountains in this quiz, and I am copying the exact styles etc., yet they still don't fill.

I would appreciate some assistance, thanks!

8 Comments
+3
Level 61
Apr 29, 2025
Not very knowledgeable, but I think group paths generally don't work... Or at the very least have difficulty to anyway
+2
Level 73
Apr 29, 2025
I am aware of that, but the thing is, it worked for me several times in the past, which is why I am confused.
+2
Level 61
Apr 29, 2025
Well it never worked for me soooo :(
+2
Level 73
Apr 29, 2025
Perhaps they didn't have a common fill (All one colour)?
+4
Level 68
Apr 29, 2025
Is this fill attribute actually on the group or the child paths? The svg-correct class will only override the fill attribute on the object with the id it applies to. E.g. if you have a group which ends up with svg-correct, and each child path has a fill attribute, the svg-correct class won't override it.

This happens because, as is standard in CSS, attributes defined directly on an object take precedence over attributes defined by classes. The way this could be fixed if you are defining your own colours for svg-correct is to use the !important exemplifier on the fill tag to make it override the attributes. Note that this can have unintended effects, and should be used sparingly.

+1
Level 75
Apr 29, 2025
What unintended affects can I have? Because I know that I’ve used this before.
+2
Level 73
Apr 30, 2025
Thanks for the response Stewart,

I have both group and child path fills so that is probably the cause. I will attempt to fix it when I can.

+1
Level 73
Apr 30, 2025
I have tried this, along with what I used in the past, which used to work, but it doesn't anymore. I presume QM has changed something in the past year or so since even copying and pasting the group which worked for me in the past doesn't work.

I have found a slightly more complex yet still manageable alternative.