如何正确对齐多个左对齐的<tspan>在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">000</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">000</tspan> 
 
     <tspan x="100%" text-anchor="start" dy="15">1234</tspan> 
 
    </text> 
 
</svg>