svg - 如何在 svg 中右对齐多个左对齐的 ？

Question

svg {
    width: 100%; height: 100px;
    border: solid 1px blue;
    font-family: monospace;
    transform: rotate(180deg);
}
text {
  transform:rotate(180deg) translate(-100px);
}

<svg>
    <text y="-85">
       <tspan x="0" text-anchor="start">000012340000</tspan>
       <tspan x="0" text-anchor="start" dy="15">1234</tspan>
   </text>
</svg>

我想在 svg 的右上角放置多行左对齐文本。

svg 的宽度未知，因为它设置为父级宽度的 100%，所以我认为我不能使用 X 或 dx 坐标。

我能够通过将整个 svg 和其中的文本元素旋转 180° 并应用负变换翻译来实现我想要的，但这对我来说感觉像是一个 hack

什么是正确的方法？

Answer 1

我认为没有“正确”的方法来做到这一点。您的解决方案的一种替代方法是在 tspans 上使用 x="100%"，然后按文本的宽度将文本翻译回来...

svg {
    width: 100%; height: 100px;
    border: solid 1px blue;
    font-family: monospace;
}

<svg>
    <text y="15" transform="translate(-100 0)">
       <tspan x="100%" text-anchor="start">000012340000</tspan>
       <tspan x="100%" text-anchor="start" dy="15">1234</tspan>
   </text>
</svg>