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°并应用负变换翻译来实现我想要的效果但这对我来说就像是黑客攻击

正确的方法是什么？

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>

如何在svg中右对齐多个左对齐的<tspan>？

1 个答案: