svg - 有没有办法让两个 SVG代替在没有为孩子指定绝对 x 的情况下在左边缘排队？

Question

以下代码将“世界”显示为x位置的连续流动。我们可以指定x="200"那一秒<tspan>，使其与左边缘的“Hello”对齐。但是有没有办法在不需要指定绝对值x的情况下做到这一点200？

就像如果我们有一个<div>，然后我们有两个<div>s ，左边缘将对齐，而无需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

可以使用变换来定位文本，那么额外的 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>