Rendering RTL text along an SVG Path - html

Question

Trying to render a Hebrew text along a path in SVG causes a bug in Chrome - the glyphs are rendered backwards (left-to-right), making the text unreadable.
<svg height="220" width="190">
<defs>
<path id="MyPath2" d="M0,100 L200,100" />
</defs>
<use xlink:href="#MyPath2" fill="none" stroke="red" />
<text text-anchor="middle" dx="100" dy="0" writing-mode="rl" direction="rtl">
<textPath xlink:href="#MyPath2">
הטקסט הזה ייראה הפוך
</textPath>
</text>
</svg>
Is there a way to get around this? Is this a known bug or is there an attribute I should've used?
JSFIddle: http://jsfiddle.net/j9RnL/

Answer 1

After not finding an elegant solution myself, I just reversed the characters.
function reverse(s, languageCode) {
if (['he', 'ar'].indexOf(languageCode) === -1)
return s;
return s.split("").reverse().join("");
}

Answer 2

I modified your SVG and it seems to render correctly on Chrome 100 and Firefox 100:
<svg viewBox="0 0 190 220" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="MyPath2" d="M0,100 L200,100"/>
</defs>
<use href="#MyPath2" fill="none" stroke="red"/>
<text text-anchor="middle" dx="100" dy="0" writing-mode="rl" direction="rtl">
<textPath href="#MyPath2">
הטקסט הזה ייראה הפוך
</textPath>
</text>
</svg>