时间戳

首页 > 解决方案 > SVG 文本；将 tspan 向左对齐，使文本父级向右对齐

html - SVG 文本；将 tspan 向左对齐，使文本父级向右对齐

问题描述

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

像这样：

在此处输入图像描述

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

我只是通过将它添加到 x with on parent来获得第一个<tspan>宽度getBBox()，然后将其用作线的起始坐标，但它是一个运行时解决方案:(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>

标签： htmlcsssvgalignment

解决方案

答案是不。

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

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

推荐阅读