如何在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 צפיות • לפני שנה </text> </g> </svg>
注:文本为动态生成且需支持多语言,无法手动调整文字顺序。
已尝试的无效方案
- 用英文字母替代•符号时显示顺序正确,但不需要额外英文内容
- 尝试使用
‏、‎等字符未生效
临时近似方案(更新1)
通过将组的x偏移设为width - 10,并针对从右到左语言添加style="direction: rtl",实现了近似效果,但仍需更完美的解决方案。
最终完美解决方案(更新2)
在中性分隔符•后添加‎(或‎),将文本拆分为两个独立的从右到左排版片段,修正后的代码如下:
<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 צפיות • ‎לפני שנה </text> </g> </svg>
内容的提问来源于Stack Exchange,提问作者DenverCoder1
相关产品推荐
相关产品推荐

