internet-explorer - Mike Bostock 如何在 "512 Paths to the White House"中获得不错的箭头？

Question

当看 512 Paths to the White House您可以看到每个“路径”的箭头始终正确呈现，即使在 Internet Explorer 9 中也是如此。众所周知，IE(最多 11 个)has problems rendering markers .

我复制了原版SVG代码 1 到 1 从 the graphic成fiddle ，并且它不起作用(在 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>