SVG 文本；将 tspans 向左对齐，使文本父级向右对齐

如何解决SVG 文本；将 tspans 向左对齐，使文本父级向右对齐

美好的一天。知道 x 和 y，我需要将多线 <text> 的右边缘与其对齐。问题是其中 <tspan> 的内容应该向左对齐。 X 和 Y 坐标（有一些偏移）作为 <line> 的起始坐标。

像这样：

是否有可能使用 svg 的属性和/或 css 来实现该行为？

我只是想通过 <tspan> 获得第一个 getBBox() 的宽度，然后将其用作线的起始坐标，方法是将其添加到 x 并打开 text-align="start"父 <text>，但它是一个运行时解决方案 :(

这是一个简化的片段：

<svg viewBox="0 0 500 500">
  <!-- KNowing x and y to translate -->
  <g transform="translate(200,200)">
    <text
     x="0"
     y="0"
     fill="#000"
     text-anchor="end"
     dominant-baseline="hanging"
    >
     <tspan
      font-size="20"
      x="0"
     >
      Title
     </tspan>
     <tspan
      font-size="15"
      x="0"
      dy="20"
     >
      Subtitle
     </tspan>
     <tspan
      font-size="10"
      x="0"
      dy="15"
     >
      Description
     </tspan>
    </text>
  </g>
  <line
   stroke="#f11"
   stroke-width="3"
   x1="205"
   y1="210"
   x2="305"
   y2="210"
  />
</svg>

解决方法

答案是否定的。

SVG 没有任何原生自动布局工具，可以让您做您想做的事。它希望您知道要放置每行文本的确切位置。

您需要按照您的建议使用 Javascript。