有没有办法让 <text> 内的两个 SVG <tspan> 在左边缘排列而不为孩子指定绝对 x？答案

【问题标题】：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?有没有办法让 <text> 内的两个 SVG <tspan> 在左边缘排列而不为孩子指定绝对 x？
【发布时间】：2020-05-05 05:12:24
【问题描述】：

以下代码将“世界”显示为x 位置的连续流。我们可以为第二个<tspan> 指定x="200"，以便它与左边缘的“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 中不起作用。

【问题讨论】：

所以你必须指定绝对的x 两次？我的目标是拥有一个“容器”，这样无论容器有什么绝对的x，孩子们都可以在左边缘排队。不需要多次指定绝对x
使用转换，您可以将 tspan x 设置为 0，这样算吗？
有效吗？如果它有效，它应该算

标签： svg text tspan

【解决方案1】：

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

【讨论】：