迈克·博斯托克如何在"512 Paths to the White House"中获得像样的箭头？

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>