我怎么会去与它们对应于HTML刻度线对齐x轴标签？

Question

我使用下面的代码来生成X轴，刻度线，并在SVG元素刻度标记，而我真的不能找出该中心与刻度线对准刻度标记的最佳方式，给出的滴答标签的宽度不固定。

<svg viewBox='0 0 1000 300'> 
    <!-- main x-axis line --> 
    <line x1='0' y1='225' x2='950' y2='225' /> 

    <!-- tick marks and labels --> 
    <line x1='95' y1='215' x2='95' y2='235' /> 
    <text x='95' y='250'>8PM</text> 

    <line x1='190' y1='215' x2='190' y2='235' /> 
    <text x='190' y='250'>10PM</text> 

    ... 
</svg> 

最终，我不太清楚如何计算文本的宽度，这样我就可以调整x协调适当。有没有使用原生JavaScript（即没有jQuery）做到这一点的方法？我只问，因为我讨厌进口的jQuery只为这...

Answer 1

看来，你想要的是文本锚点属性：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor