如何将 SVG 文本向右对齐？

Question

我正在使用 SVG 创建一些表格并在其中放入一些文本。我可以使用 SVG 坐标控制文本的位置，但文本长度是可变的，因为它来自某些数据。有某种方法可以获取文本的长度或使用其他工具将其向右对齐吗？

Answer 1

右对齐

将文本放在

textPath

上，设置

pathLength=100

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath

startoffset

和

text-anchor

负责定位

使用下

startoffset

来添加右侧填充

注意！仅 FireFox 支持在

path

本身上定义

textPath

<svg viewbox="0 0 200 50">
  <path id="P" pathLength="100" d="M0 25h200" stroke="blue"/>
  <text>
    <textPath href="#P" 
              startoffset="100" text-anchor="end" 
              dominant-baseline="middle"
              fill="green" font-size="14px">Right aligned</textPath>
  </text>
</svg>