将文本（或其他对象）与容器底部对齐

Question

我有一个像这样的 SVG 组元素：

<g transform="translate(290 110)">
    <rect x="0" y="0" rx="4" ry="4" width="68" height="68" style="fill:none;stroke:black;stroke-width:1;" />
</g>

我想添加一些与 rect 的左下角内侧边框对齐的文本。有点像 HTML.

中的 left 和 bottom CSS 属性

我该如何完成？

[编辑]

尝试自己计算偏移量的一个问题是我无法在同一计算中混合和匹配 px 和 em 测量值。例如，容器是 68x68px，但我想将文本从底部偏移 1em。此外，从一个 tspan 到下一个 tspan 的距离应该基于像素以外的其他东西。

Answer 1

要对齐多行文本，只需使用 <tspan> 和 dy 属性。

<svg width="400" height="400">
  <g transform="translate(290 110)">
    <rect x="0" y="0" rx="4" ry="4" width="68" height="68" style="fill:none;stroke:black;stroke-width:1;" />
    
    <text y="68">
      <tspan>First line</tspan>
      <tspan x="0" dy="-1em">Second line</tspan>
      <tspan x="0" dy="-1em">Third line</tspan>
    </text>
  </g>
</svg>

将文本（或其他对象）与容器底部对齐

Align text (or other objects) with bottom of container

svg

text-alignment