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;
}

JavaScript

//if not IE, just insert the rule body[dir="rtl"] svg > text ...
if(!('ActiveXObject' in window)){
    document.styleSheets[0].insertRule("body[dir='rtl'] svg > text { text-anchor: start;}",0);    
}