How does Mike Bostock manage to get decent arrow heads in "512 Paths to the White House"?

Question

When looking at 512 Paths to the White House you can see that the arrow heads for each "path" are always rendered correctly, even in Internet Explorer 9. It is a known fact that IE (up to 11) has problems rendering markers.

I copied the plain SVG code 1 to 1 from the graphic into a fiddle, and there it doesn't work (tested in IE9+10), the arrow is rendered as a square.

<svg height="650" width="970">
    <defs>
        <marker orient="auto" viewBox="-.1 -5 10 10" id="g-arrowhead-rep"><path class="g-marker g-rep" d="M-.1,-4L3.9,0L-.1,4"></path></marker>
    </defs>
    <g>
        <path style="stroke-width: 16.5px;" marker-end="url(#g-arrowhead-rep)" class="g-link g-dem" d="M416.75,0C416.75,60.5,148.43655105625137,60.5,148.43655105625137,121"></path>
    </g>
</svg>

I couldn't find any hints in Bostock's code (but didn't look closely, too). What black magic does he use to make it display correctly?

Answer 1

This is a careful allocation of fill and stroke responsibilities among multiple cascading classes that apply to the chart, the arrow body path, the marker object and the path definition within the marker object.

Markers work in IE10+ if you use a no fill group wrapper, a stroke in the body, but use fill=something and stroke=none in the marker path definition itself. e.g.

<svg height="650" width="970">
    <defs>
        <marker orient="auto" viewBox="-.1 -5 10 10" id="g-arrowhead-rep"><path  d="M-.1,-4L3.9,0L-.1,4" stroke="none" fill="blue"></path></marker>

    </defs>
    <g transform="translate(60,85)" fill="none">
        <path stroke="blue" stroke-width="16" marker-end="url(#g-arrowhead-rep)"   d="M416.75,0C416.75,60.5,148.43655105625137,60.5,148.43655105625137,121"></path>
    </g>
</svg>