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

Question

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

的起始坐标

像这样：

是否有可能使用 svg 的属性实现该行为 and/or css？

我只是想通过getBBox()得到第一个<tspan>的宽度，然后用它作为直线的起始坐标，用[=16=把它加到x上] 在父 <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>

Answer 1

答案是否定的

SVG 没有任何 native 自动布局工具，可让您随心所欲。它希望您知道每行文本的确切位置。

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

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

SVG text; align tspans to the left having text parent aligned to the right

html

css

svg

alignment