Chrome中SVG文本设置letter/word-spacing时RTL文字反转问题求助

这是Chrome内核的已知渲染Bug：当SVG <text> 元素同时设置RTL方向属性（direction="rtl"/writing-mode="rl"）和原生的letter-spacing/word-spacing属性时，内核计算字符间距的逻辑会错误重置文本的双向书写方向标识，最终导致RTL文本按LTR规则反转显示。

• 方案1：用CSS样式控制间距+显式指定双向文本规则
  放弃SVG原生的letterSpacing属性，改用CSS的letter-spacing属性，同时添加unicode-bidi: bidi-override强制RTL方向生效，修复代码如下：

<svg textAnchor="middle">
  <text x="50" y="50" direction="rtl" writing-mode="rl" style="letter-spacing:4px; unicode-bidi: bidi-override;">שלום</text>
</svg>

• 方案2：添加RTL控制字符包裹文本内容
  如果需要保留SVG原生的letterSpacing属性，可以用右向控制符‏（RLM，右到左标记）包裹文本内容，强制渲染器识别文本的RTL属性，修复代码如下：

<svg textAnchor="middle">
  <text x="50" y="50" direction="rtl" writing-mode="rl" letterSpacing="4">&#x200F;שלום&#x200F;</text>
</svg>

• 方案3：兼容低版本Chrome的降级方案
  对于80版本之前的Chrome，上述方案不生效时，可以手动反转文本内容，同时去掉direction和writing-mode属性，按LTR规则渲染即可得到正确的RTL显示效果：

<svg textAnchor="middle">
  <text x="50" y="50" letterSpacing="4">םולש</text>
</svg>

内容的提问来源于stack exchange，提问作者zvijude