为什么无论填充规则如何，我都无法填充路径中的某些区域？

Question

我画了一个齿轮的表示，但我无法填充我想要填充的区域。你可以在这里查看：

https://jsfiddle.net/9k451fb6/

我想要填充中心“洞”之外的部分，到齿轮，而“洞”被填充，以及齿轮边缘的部分（这本身对我来说很好奇，因为路径是一条完整的路径，最后有一个关闭 (z)，那么为什么看起来每个齿轮部分都已关闭？）

我尝试了fill-rule,nonzero和的选项evenodd，但没有任何改变。

这是我正在使用的代码。请注意，它是用单个路径绘制的。但是，我已经尝试过这种方法，并在中间绘制圆圈（“洞”）之前关闭路径（插入 az）：

<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>

Answer 1

我认为这就是您想要实现的目标：

<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>

我已经删除了 cog 的“牙齿”之间的 M 命令。通过为每颗牙齿移动到一个新点，您就在强制填充该碎片。