複数の左揃えの<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の座標を使用することはできません。

私は180 °によってその中に全体SVGおよびテキスト要素の両方を回転させ、正しい方法は何負の翻訳変換が、これは

私にはハックのように感じて適用することによって、望んでいたものを達成することができました？

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>