SVG arc rendering artifacts in Safari - ios

Question

I have a very simple SVG to render: https://jsfiddle.net/091y7uyr/3/
There is a lot of math code there, but the point of it is just:
<svg style="position:fixed;top:0px;left:0px;width:100%;height:100%;
pointer-events:none;">
<path d="
M 65 51
A 434.180675278184 434.180675278184
0 0 0
275.01708984375 351.9502944946289
M 65 51
A 399.44622125592934 399.44622125592934
0 0 0
275.01708984375 351.9502944946289"
fill="black" fill-rule="evenodd">
</path>
</svg>
Here is the result:
But, in Safari, both on iOS (v9.3.4) and desktop (v9.1, build 11601.5.17.1) it looks a bit differently:
Does anybody know why that line between arc edges appears, and how to get rid of it?

Answer 1

Your SVG path is constructed a bit oddly.
<svg width="400px" height="400px">
<path d="M 59 110
A 167.87197502859138 167.87197502859138
0 0 0
200 301
M 59 110
A 159.4783762771618 159.4783762771618
0 0 0
200 301"
fill="black" fill-rule="evenodd"></path>
</svg>
You've constructed your shape by drawing two subpaths that start at the same place and curve in the same direction. So you actually have two circular segments overlaid on top of one another.
If we draw them separately and with a bit of opacity, you can see what is actually happening.
<svg width="400px" height="400px">
<path d="M 59 110
A 167.87197502859138 167.87197502859138
0 0 0
200 301" fill="red" opacity="0.4"/>
<path d="M 59 110
A 159.4783762771618 159.4783762771618
0 0 0
200 301" fill="green" opacity="0.4"/>
</svg>
The reason you are seeing only the difference between the two (the thin half-moon shape) is because you are using the even-odd fill rule. When you use the even-odd fill rule, overlapping subpaths generally create a hole.
The thin line you are seeing between the two endpoints is due to artifacts caused by slight differences in anti-aliasing between the two segment edges that are exactly on top of each other. Anti-aliasing is the use of shades of colour to make the edges of lines appear smoother. This is probably happening to some extent on all browsers. It's just more noticeable in Safari for some reason.
Fortunately in your case there is an easy fix. Instead of using two subpaths, just combine them into a single path. Have one arc going from rectangle A to B, and then an arc going back to the start point. If you do that, your extraneous extra line will disappear.
<svg width="400px" height="400px">
<path d="M 59 110
A 167.87197502859138 167.87197502859138
0 0 0
200 301
A 159.4783762771618 159.4783762771618
0 0 1
59 110"
fill="black"></path>
</svg>