html – Why can't I fill certain areas inside path regardless of the fill type?

Question:

I have drawn a cogwheel and I cannot fill the area I want to fill. You can take a look here:

I want the part to be filled outside of the "hole" in the center, up to the notches, while the "hole" is filled along with the parts of the edges of the teeth (which is interesting in itself to me since the path is one full path with one closure (z) at the end, so why does it seem like every section of the gear is covered?)

I tried the fill options, fill-rule=nonzero and evenodd, but nothing changed.

Below is the code I am using. Note that it is drawn with one path. However, I tried both this method and closing the path (insert z) just before drawing the circle in the middle ("hole"):

<svg id="cogwheel_1" viewBox="0 0 300 300">
  <path id="arc_path" stroke="#ff0000" stroke-width="2" fill="blue" fill-rule="evenodd" d="M 120 5 A 30 30 0 0 0 179 5 L 211 15 M 211 15 A 30 30 0 0 0 259 50 L 278 77 M 278 77 A 30 30 0 0 0 296 133 L 296 166 M 296 166 A 30 30 0 0 0 278 222 L 259 249 M 259 249 A 30 30 0 0 0 211 284 L 179 294 M 179 294 A 30 30 0 0 0 120 294 L 88 284 M 88 284 A 30 30 0 0 0 40 249 L 21 222 M 21 222 A 30 30 0 0 0 3 166 L 3 133 M 3 133 A 30 30 0 0 0 21 77 L 40 50 M 40 50 A 30 30 0 0 0 88 15 L 120 5 M 150 200 A 50 50 0 1 0 149 200 z"></path>
</svg>

_{Free translation of the question Why am I unable to fill certain areas within a path, regardless of fill-rule? from contributor @Allasso .}

Answer:

I think this is what you want to achieve:

<svg id="cogwheel_1" viewBox="0 0 300 300">
  <path id="arc_path" stroke="#ff0000" stroke-width="2" fill="blue" fill-rule="evenodd" d="M 120 5 A 30 30 0 0 0 179 5 L 211 15 
A 30 30 0 0 0 259 50 L 278 77 
A 30 30 0 0 0 296 133 L 296 166 
A 30 30 0 0 0 278 222 L 259 249 
A 30 30 0 0 0 211 284 L 179 294 
A 30 30 0 0 0 120 294 L 88 284
A 30 30 0 0 0 40 249 L 21 222 
A 30 30 0 0 0 3 166 L 3 133
A 30 30 0 0 0 21 77 L 40 50
A 30 30 0 0 0 88 15 L 120 5 
M 150 200 A 50 50 0 1 0 149 200 z"></path>
</svg>

I removed the M commands between the cogs of the gear. Moving to a new point for each tooth, you forced to fill this fragment.

_{Free translation of answer from contributor @enxaneta .}

Post Views: 0