Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why am I unable to fill certain areas within a path, regardless of fill-rule?

Tags:

svg

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>
like image 480
KevinHJ Avatar asked Jan 24 '23 07:01

KevinHJ


1 Answers

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.

like image 131
enxaneta Avatar answered May 21 '23 22:05

enxaneta