沿SVG路径渲染RTL文本

时间:2014-07-20 11:20:56

标签: html svg right-to-left hebrew

尝试在SVG中沿路径渲染希伯来文本会导致Chrome中出现错误 - 字形向后渲染(从左到右),使文本无法读取。

letters are backwards

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

有没有办法解决这个问题?这是一个已知的错误还是我应该使用的属性?

JSFIddle: http://jsfiddle.net/j9RnL/

1 个答案:

答案 0 :(得分:0)

我自己找不到合适的解决方案后,我只是反转了字符。

function reverse(s, languageCode) {
    if (['he', 'ar'].indexOf(languageCode) === -1)
        return s;
    return s.split("").reverse().join("");
}