如何正確對齊多個左對齊的<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>