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

user_2179138 0
Viewed 129

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>

svg
2 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.

user_78973950

Any way it was already answered I'm going to leave here my approach. The problem with your svg was that every teeth corner of the cogwheel started a new sub path which nodes where at the same possition of the next teeth but were not connected with eachother. I just opened the file in Inkscape, selected all nodes and joined with the corresponding tool. Notice for the future: Any time you see a similar behaviour, mainly with svgs exported by Illustrator, CorellDraw and some online editors, you can be sure that some where in the path there are overlaped nodes but not conected.

Notice the difference between the two corners. The one above the two nodes are not connected.

fig 1

So what you really got was a series of sub paths filled in blue as the arrow shows.

fig 2

And this is the code just as SVGO cleaned it after Inkscape have saved it.

<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" d="M 264.07142,186.6301 C 259.69918,200.23262 265.52681,215.03117 278,222 l -19,27 C 248.58911,238.28353 231.87939,236.86124 219.80706,245.66397 207.73474,254.46671 203.97989,270.81109 211,284 l -32,10 c -2.6299,-14.22385 -15.03507,-24.54564 -29.5,-24.54564 -14.46493,0 -26.8701,10.32179 -29.5,24.54564 L 88,284 C 95.020113,270.81109 91.265258,254.46671 79.192936,245.66397 67.120613,236.86124 50.410887,238.28353 40,249 L 21,222 C 33.47319,215.03117 39.300816,200.23262 34.928577,186.6301 30.556338,173.02758 17.197624,164.39607 3,166 l 0,-33 c 14.197624,1.60393 27.556338,-7.02758 31.928577,-20.6301 C 39.300816,98.767378 33.47319,83.968835 21,77 L 40,50 C 50.410887,60.716466 67.120613,62.138761 79.192936,53.336026 91.265258,44.533291 95.020113,28.188906 88,15 L 120,5 c 2.6299,14.223853 15.03507,24.545641 29.5,24.545641 14.46493,0 26.8701,-10.321788 29.5,-24.545641 l 32,10 c -7.02011,13.188906 -3.26526,29.533291 8.80706,38.336026 C 231.87939,62.138761 248.58911,60.716466 259,50 l 19,27 C 265.52681,83.968835 259.69918,98.767378 264.07142,112.3699 268.44366,125.97242 281.80238,134.60393 296,133 l 0,33 c -14.19762,-1.60393 -27.55634,7.02758 -31.92858,20.6301 z M 150,200 c 27.51544,-0.27517 49.63706,-22.73389 49.4979,-50.23579 -0.13917,-27.5005 -22.48529,-49.69493 -49.9979,-49.69493 -27.51261,0 -49.858733,22.19443 -49.997895,49.69493 C 99.362936,177.26611 121.48456,199.72483 149,200 Z"  style="fill:#0000ff;fill-rule:evenodd;stroke:#ff0000;stroke-width:2"/>
</svg>

And, as a final advice, as I always recommend, if svg was created for the web, and Inkscape produces native svg files ready for the web, why people is still struggling with the awful overcomplicated unhuman svg files produced by propietary software?

user_151074500
Related