我怎麼會去與它們對應於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