SVG textPath希伯来文本仅在Safari中反转的跨浏览器解决方案问询

问题现象 #

在 macOS Ventura 13.2 的 Safari 16.3 浏览器中，绑定到 SVG textPath 的希伯来文本显示为反转状态；但相同文本在 Chrome、Firefox 中显示正常，未绑定路径的希伯来文本在所有浏览器中均显示正常。

已尝试的无效方案 #

• 使用 unicode-bidi: bidi-override：会导致 Chrome/Firefox 中文本反转，且无法修正 Safari 的显示问题，不具备跨浏览器通用性
• 调整 rtl/ltr 方向相关的 CSS/HTML/SVG dir/direction 属性
• 设置 lang/xml:lang="he" 属性
• 参考同类问题但未找到有效解决办法

跨浏览器解决方案 #

方案1：浏览器检测+文本反转 #

针对 Safari 对 SVG textPath 的 RTL 文本渲染 bug，通过 JavaScript 检测浏览器后单独反转文本内容，不影响其他浏览器的正常渲染：

<html dir="rtl" lang="he">
<svg viewBox="0 0 1000 1000" width="500" xmlns="http://www.w3.org/2000/svg">
  <path
      id="MyPath1"
      fill="none"
      stroke="red"
      d="M 500, 120 m 0, -110 a 110,110 0 0,1 0,320 a 110,110 0 0,1 0,-320" />
  
  <text x='600' y='200'>
    text not on path is ok טקסט רגיל
  </text>
  <text>
    <textPath href="#MyPath1" text-anchor="end">
      hebrew textpath reversed only on safari טקסט על מסלול הפוך רק בספארי
    </textPath>
  </text>
</svg>

<script>
// 检测Safari（排除Chrome伪装的Safari标识）
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
  const textPathEl = document.querySelector('textPath');
  textPathEl.textContent = textPathEl.textContent.split('').reverse().join('');
}
</script>
</html>

方案2：CSS特性检测适配 #

利用 @supports 针对 Safari 专属特性编写样式，单独修正文本方向：

/* 仅对Safari生效的样式修正 */
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  textPath[href="#MyPath1"] {
    direction: ltr;
    unicode-bidi: bidi-override;
  }
}

将上述CSS添加到页面中，可让Safari中的文本正常显示，同时不干扰Chrome/Firefox的原有渲染效果。

内容的提问来源于stack exchange，提问作者o17t H1H'S'k