Rendering RTL text along an SVG Path

问题

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/

回答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("");
}

来源：https://stackoverflow.com/questions/24849981/rendering-rtl-text-along-an-svg-path