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>

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

1 个答案: