This is the current result I have while I try to fill inside my path: screenshot .
Notice the stroke is correct, but the fill isn't: jsfiddle .
I've looked at fill-rule but that doesn't seem do much. I'm guessing the problem is more about my shape not closing properly.
Please help!
This is the generated svg for the above:
<svg height="75" version="1.1" width="150" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: 0px; top: 0px;"><desc>Created with Raphaël 2.1.0</desc><defs/>
<path style="" fill="#949598" stroke="#000000" d="M75,75L150,75.00000000000001A75,75,0,0,0,0,74.99999999999999M75,75L45,75A30,30,0,1,1,105,75.00000000000001Z" stroke-width="0"/>
<path style="fill-opacity: 1.2;" fill="#c9532f" stroke="#00ff00" d="M75,75M48.144896960365074,4.972837836089695A75,75,0,0,0,0,74.99999999999999M75,75M64.25795878414603,46.989135134435884A30,30,0,0,0,45,75M64.25795878414603,46.989135134435884L48.144896960365074,4.972837836089695M45,75L0,75Z" stroke-width="1" fill-opacity="1.2"/>
<circle cx="75" cy="75" r="5" fill="#333333" stroke="#000" style="" stroke-width="0"/>
</svg>
Your path for the smaller donut is drawn in four parts that hop around the page, which appears to be confusing Raphael when it comes to determining what is inside and outside the shape. (I cannot speak to exactly how it makes this determination.)
The easiest solution is to draw the shape by never "lifting your pen" from the page--in other words, by constructing the path string to only use one 'M' at the beginning. This isn't possible will all shapes, but very easy in your case. Below, I rearranged the path so that it's drawn in pieces without ever jumping to a new coordinate:
var p2 = paper.path("M48.1,5A75,75,0,0,0,0,75L45,75A30,30,0,0,1,64.2,47L48.1,5").attr("fill", "#c9532f");
(I also rounded the values for readability purposes. There's not need for pixel values with 10 decimal places).
As you see, this starts in the same place, draws the outer curve to 0,75, draws the line to the bottom of the inner curve, draws the inner curve clockwise, and then reconnects with the original point. Note that the inner curve needs the second boolean value, the "sweep flag", changed from 0 to 1 to be drawn correctly in the reverse direction.
In general, it's good to build your paths in the same manner that you would draw them by hand (when possible), to keep them coherent when you go back to eyeball them.
Here's the whole thing:
var paper = Raphael(0, 0, 800, 600);
var p1 = paper.path("M75,75L150,75.00000000000001A75,75,0,0,0,0,74.99999999999999M75,75L45,75A30,30,0,1,1,105,75.00000000000001Z").attr("fill", "#949598");
var p2 = paper.path("M48.1,5A75,75,0,0,0,0,75L45,75A30,30,0,0,1,64.2,47L48.1,5").attr("fill", "#c9532f");
var c = paper.circle(64.2,47, 5).attr("fill", "#333333");