沿 SVG 路径渲染 RTL 文本答案

【问题标题】：Rendering RTL text along an SVG Path沿 SVG 路径渲染 RTL 文本
【发布时间】：2014-09-11 01:35:11
【问题描述】：

尝试在 SVG 中沿路径渲染希伯来文本会导致 Chrome 出现错误 - 字形被向后（从左到右）渲染，导致文本无法阅读。

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

【问题讨论】：

看起来 writing-mode="rl" 已被弃用，取而代之的是“rl-tb”，但改变它似乎并不能解决您的问题。 developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
唯一的其他相关属性是unicode-bidi。您可以尝试“embed”或“bidi-override”值以查看它们是否具有所需的效果。您也可以尝试沿相反方向绘制路径，即沿您希望文本移动的方向，例如d="M200,100 L0,100"。 JSFiddle 目前正在给我一个错误面孔而不是结果框架，所以我无法自己测试它。它可能归结为 Chrome 错误； SVG 中对 RTL 语言的支持不如编写规范的人所设想的那么好。
目前，它在 Firefox 42.0 中运行良好，可能是 SVG 不支持，当时还没有完全实现。
我不认为你想通了？我仍然可以重现 Chrome 和 Safari 中的错误，所以可能是 Webkit 中的错误。如果我删除<tspan> 上的dx attr，文本将出现 RTL。

标签： html svg right-to-left hebrew

【解决方案1】：

在自己没有找到优雅的解决方案后，我只是将字符颠倒过来。

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

【讨论】：