I have drawn a representation of a cogwheel, and I am unable to fill the area I want filled. You can look at it here:
https://jsfiddle.net/9k451fb6/
I want the portion filled outside of the "hole" in the center, out to the cogs, whereas the "hole" gets filled, along with portions of the edges of the cogs (which in itself is curious to me, as the path is a single complete path with a single close (z) at the end, so why does it seem like each cog section has been closed?)
I have tried the options of fill-rule
, nonzero
and evenodd
, but nothing changes.
This is the code I'm using. Note that it is drawn with a single path. However I have tried both this method, and closing the path (inserting a 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>
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've removed the M commands between cog's "teeths". By moving to a new point for every tooth you were forcing the filling of that fragment.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With