有没有办法两个SVG<tspan> 代替<text>在没有为孩子指定绝对 x 的情况下在左边缘排队？</text></tspan>

Question

以下代码将“世界”显示为x position 的连续流。 我们可以为第二个<tspan>指定x="200"以便它与左边缘的“Hello”对齐。 但是有没有办法在不需要指定绝对x为200的情况下做到这一点？

就像我们有一个<div> ，然后我们里面有两个<div> ，左边缘会对齐，而不需要为父级指定绝对x为子级指定绝对x ：

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

我考虑过使用

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

它在 Chrome 中不起作用。

Answer 1

你可以使用一个变换到 position 的文本，那么额外的 tspan x 值为 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>