Question

查看512 Paths to the White House时，您可以看到每个“路径”的箭头始终正确呈现，即使在Internet Explorer 9中也是如此。已知的事实是IE（最多11个）{{3} }。

我将普通SVG代码1从1 has problems rendering markers复制到the graphic，然后它无效（在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

这是在多个级联类之间仔细分配填充和描边任务，这些类适用于图表，箭头体路径，标记对象和标记对象中的路径定义。

标记在IE10 +中工作，如果你使用无填充组包装器，在主体中使用笔划，但在标记路径定义本身中使用fill = something和stroke = none。 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>

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

1 个答案: