如何将 SVG 文本向右对齐？

Question

我正在使用 SVG 创建一些表格并在其中放置一些文本。我可以使用 SVG 坐标控制文本的位置，但文本长度是可变的，因为它来自某些数据。有什么方法可以得到文本的长度或其他工具来证明它是正确的？

Answer 1

右对齐

将您的文字放在 textPath 上，设置 pathLength=100

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

startoffset 和 text-anchor 负责定位

玩较低的 startoffset 以添加 right-padding

<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>