RTL 文本(希伯来语)在 SVG 路径上时显示为反转
RTL text (Hebrew) shows reversed when is on SVG path
我无法在 SVG 的弯曲路径上正确显示 RTL 文本。
尝试过 This Codepan
但无法使其正常显示
尝试添加方向、书写模式、目录、覆盖- bidi - 没有任何效果
有没有办法在不反转文本的地址字节或路径的点的情况下做到这一点?将来我计划使用 Eng/Heb 混合,所以真的不想反转文本
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 177.5 175" xml:space="preserve">
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
<image x="0" y="0" xlink:href="http://i.imgur.com/7Nlcay7.jpg" width="200" height="200"/>
</pattern>
</defs>
<ellipse id="FillThisWithColorOrPattern" fill="url(#image)" stroke="#333333" stroke-miterlimit="10" cx="90" cy="87" rx="87.5" ry="82"/>
<circle id="Inner_1_" fill="#FF0000" cx="90" cy="87" r="35"/>
<path id="TextLine1_Path" fill=None
d="M90,137.5c-27.8,0-50.5-22.7-50.5-50.5S62.2,36.5,90,36.5s50.5,22.7,50.5,50.5S117.8,137.5,90,137.5z M90,37.5
c-27.3,0-49.5,22.2-49.5,49.5s22.2,49.5,49.5,49.5c27.3,0,49.5-22.2,49.5-49.5S117.3,37.5,90,37.5z"/>
<text stroke="#00FF00">
<textPath xlink:href="#TextLine1_Path">
שלום כיתה אלף
</textPath>
</text>
</svg>
据我所知,这是渲染中的一个错误 app/lib。由于复杂语言脚本的双向和整形是一个视觉问题,它不是 SVG language/standard 本身的逻辑问题。
无论如何,问题发布后情况发生了变化。目前为 2021 年 12 月,使用 Mac OS 11.6.1:
- Firefox/95.0 渲染效果很好。
- Inkscape/1.1-alpha 渲染效果很好。
- Chromium/90.0 使其反转且未成形(非连接字母)。
- Safari/15.1 使其反转且未成形(非连接字母)。
我无法在 SVG 的弯曲路径上正确显示 RTL 文本。 尝试过 This Codepan 但无法使其正常显示 尝试添加方向、书写模式、目录、覆盖- bidi - 没有任何效果 有没有办法在不反转文本的地址字节或路径的点的情况下做到这一点?将来我计划使用 Eng/Heb 混合,所以真的不想反转文本
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 177.5 175" xml:space="preserve">
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
<image x="0" y="0" xlink:href="http://i.imgur.com/7Nlcay7.jpg" width="200" height="200"/>
</pattern>
</defs>
<ellipse id="FillThisWithColorOrPattern" fill="url(#image)" stroke="#333333" stroke-miterlimit="10" cx="90" cy="87" rx="87.5" ry="82"/>
<circle id="Inner_1_" fill="#FF0000" cx="90" cy="87" r="35"/>
<path id="TextLine1_Path" fill=None
d="M90,137.5c-27.8,0-50.5-22.7-50.5-50.5S62.2,36.5,90,36.5s50.5,22.7,50.5,50.5S117.8,137.5,90,137.5z M90,37.5
c-27.3,0-49.5,22.2-49.5,49.5s22.2,49.5,49.5,49.5c27.3,0,49.5-22.2,49.5-49.5S117.3,37.5,90,37.5z"/>
<text stroke="#00FF00">
<textPath xlink:href="#TextLine1_Path">
שלום כיתה אלף
</textPath>
</text>
</svg>
据我所知,这是渲染中的一个错误 app/lib。由于复杂语言脚本的双向和整形是一个视觉问题,它不是 SVG language/standard 本身的逻辑问题。
无论如何,问题发布后情况发生了变化。目前为 2021 年 12 月,使用 Mac OS 11.6.1:
- Firefox/95.0 渲染效果很好。
- Inkscape/1.1-alpha 渲染效果很好。
- Chromium/90.0 使其反转且未成形(非连接字母)。
- Safari/15.1 使其反转且未成形(非连接字母)。