You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在SVG中分隔无英文间隔的从右到左文本?

SVG希伯来语文本排版问题解决记录

原问题与异常代码

期望实现希伯来语文本“צפיות”在左侧、“לפני שנה”在右侧的排版,但以下SVG代码显示效果不符合预期:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="100" viewBox="0 0 250 100">
<g transform="translate(10, 20)">
    <text>
        11K צפיות&ensp;•&ensp;לפני שנה
    </text>
</g>
</svg>

注:文本为动态生成且需支持多语言,无法手动调整文字顺序。

已尝试的无效方案

  • 用英文字母替代•符号时显示顺序正确,但不需要额外英文内容
  • 尝试使用&rlm;、&lrm;等字符未生效

临时近似方案(更新1)

通过将组的x偏移设为width - 10,并针对从右到左语言添加style="direction: rtl",实现了近似效果,但仍需更完美的解决方案。

最终完美解决方案(更新2)

在中性分隔符•后添加&#x200E;(或&lrm;),将文本拆分为两个独立的从右到左排版片段,修正后的代码如下:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="100" viewBox="0 0 250 100">
<g transform="translate(10, 20)">
    <text>
        11K צפיות&ensp;•&ensp;&lrm;לפני שנה
    </text>
</g>
</svg>

内容的提问来源于Stack Exchange,提问作者DenverCoder1

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.16 18:45:36