沿SVG路径渲染RTL文本 [英] Rendering RTL text along an SVG Path
本文介绍了沿SVG路径渲染RTL文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
尝试在SVG中沿路径呈现希伯来语文本会导致Chrome中的错误-字形是向后(从左到右)呈现的,从而使文本不可读.
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/ >
推荐答案
我自己找不到合适的解决方案后,我只是反转了字符.
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("");
}
这篇关于沿SVG路径渲染RTL文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文