SVG 文本；将 tspan 向左对齐，使文本父级向右对齐答案

【问题标题】：SVG text; align tspans to the left having text parent aligned to the rightSVG 文本；将 tspan 向左对齐，使文本父级向右对齐
【发布时间】：2021-03-21 19:17:32
【问题描述】：

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

像这样的：

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

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

这是一个简化的 sn-p：

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

【问题讨论】：

标签： html css svg alignment

【解决方案1】：

答案是否定的。

SVG 没有任何 native 自动布局工具可以让你做你想做的事。它希望你知道你想把每一行文本放在哪里。

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

【讨论】：