在SVG中动态定位文本

Question

我想知道是否有办法可以动态计算SVG中文本的位置。

Problem我有两种类型的量表 - 主要（仅1）和次要（1+）。

• 主要比例位于图表中最左侧的位置
• 辅助比例应位于上一比例（主要或次要）
旁边
• 辅助比例只有两个值（最小和最大），因此它们应相对于主比例的顶部和底部可见。

我知道，这可以通过提供SVG text的硬编码X和Y坐标来实现，但是可以通过操纵CSS来实现，例如使用位置或显示或浮动属性？

＆＃ 13;

＆＃13;

<svg width="100%" height="100%" viewBox="0 0 300 200"
     xmlns="http://www.w3.org/2000/svg">
    <g class="value-scales">
      <g class="primary-scale">
        <text x="5" y="20" fill="deepPink">2</text>
        <text x="5" y="40" fill="deepPink">4</text>
        <text x="5" y="60" fill="deepPink">6</text>
       </g>
      <g class="secondary-scale">
        <text x="20" y="20" fill="red">100</text>
        <text x="20" y="60" fill="red">200</text>
      </g>
      <g class="secondary-scale">
        <text x="50" y="20" fill="blue">40</text>
        <text x="50" y="60" fill="blue">160</text>
      </g>
</svg>

＆＃13;

＆＃13;

＆＃13;   

CodePen：Dyanmic Scale Positioning

Answer 1

如果您想在上面的示例中对齐数字40和160，请使用text-align="right"并从每个单元格的右列进行测量。

对于javascript编码，使用getBBox()获取边界框，并从那里调整SVG文本x和y值，假设您不使用{{1}正确的

CSS操作在这里不实用，因为你可能需要每个单元格的CSS。