Align text (or other objects) with bottom of container

Question

I have a SVG group element such as this:

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

I would like to add some text that is aligned with the inside bottom-left border of the rect. Sort of like the left and bottom CSS attributes in HTML.

How do I accomplish this?

[edit]

One problem with trying to calculate the offsets myself is that I can't mix and match px and em measurements in the same calculation. For instance, the container is 68x68px, but I want to offset the text 1em from the bottom. Also, the distance from one tspan to the next should be based on something other than pixels.

Answer 1

To align multuiple rows of text, just use <tspan> and the dy attribute.

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