迈克博斯托克如何在"512白宫之路"中获得体面的箭头？

Question

当查看到白宫的512路径时,您可以看到每个"路径"的箭头始终正确呈现,即使在Internet Explorer 9中也是如此.已知的事实是IE(最多11个)在渲染标记时存在问题.

我将普通SVG代码1到1从图形复制到小提琴中,并且它不起作用(在IE9 + 10中测试),箭头呈现为正方形.

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

我在Bostock的代码中找不到任何提示(但也没有仔细观察).他用什么黑魔法使它正确显示？

Answer 1

这是在应用于图表、箭头主体路径、标记对象和标记对象内的路径定义的多个级联类之间仔细分配填充和描边职责。

如果您使用无填充组包装器（正文中的笔划），但在标记路径定义本身中使用 fill=something 和 stroke=none，则标记可以在 IE10+ 中工作。例如

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