JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="200" width="200">
    <rect width="100" height="100" fill="lightblue"></rect>
    <text x="98" y="98">abc</text>
</svg>

CSS

svg > text {
    text-anchor: end;
}
body[dir="rtl"] svg > text {
    text-anchor: start;    
}