Is there a way for two SVG <tspan> inside of <text> line up at the left edge without specifying an absolute x for the child?

Question

The following code will show the "World" as a continuous flow of the x position. We can specify x="200" for that second <tspan> so that it lines up with the "Hello" at the left edge. But is there a way to do it without needing to specify an absolute x of 200?

It is like if we have a <div>, and then we have two <div>s inside, the left edge will line up, without needing to specify an absolute x for the parent and an absolute x for the child:

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="200px" viewBox="0 0 400 200">

  <text x="200" y="30">
    <tspan>Hello</tspan>
    <tspan dy="1.2em">World</tspan>
  </text>

</svg>

I thought about using

  <style>
    text { position: relative }
    tspan { position: absolute; left: 0 }
  </style>

and it doesn't work inside of Chrome.

Answer 1

You can use a transform to position the text, then the additional tspan x value is 0.

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="200px" viewBox="0 0 400 200">

  <text transform="translate(200, 30)">
    <tspan>Hello</tspan>
    <tspan x="0" dy="1.2em">World</tspan>
  </text>

</svg>