使用 RTL 语言时，Safari 渲染 svg 文本 tspan 的位置错误

Answer 1

我可以在使用这些基于 webkit 的浏览器运行 linux mint 的虚拟机中重现此错误：

网络/顿悟

绿
• 您应该报告的错误：

Webkit 错误报告

• 苹果Safari
• 有关从右到左问题的相关 webkit 错误报告：

“带有希伯来语文本的 SVG 错误移动”

解决方法：在“线”之间插入从左到右标记

<tspan>：

svg {
  height: 20em;
  font-family: sans-serif;
}

tspan {
  direction: rtl;
}

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <rect width="120" height="120" style="stroke:pink;fill:white;stroke-width:3;" />
  <path d="M60,5 L60,115 M5,60 L115,60" stroke="pink" />
    <text x="60" y="60" 
      style="fill: rgb(96, 94, 92); font-family: 'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 12px; text-anchor: middle;">
      <tspan x="60"  y="60" dy="0">دولة الإمارات العربية</tspan>
      <!-- left-to right mark -->
      <tspan dx="-0.5em" class="br">&#x200E;</tspan>
      <tspan x="60"  dy="20" style="fill: lightsalmon">المتحدة</tspan>
    </text>
</svg>

我们实际上是在伪线

<tspan>

元素之间从

从右到左切换到 从左到右。

dx="-0.5em"

补偿了引入的额外空间（...尽管从右到左的标记/字符不应该占用任何空间）。

另请参阅 

“如何在 SVG 中分隔从右到左的文本，且中间不包含英文字母？”

我不知道正确的行为应该是什么，但 Safari 显然对此有自己的想法。无论如何，如果您将每个

Answer 2

放入其自己的

<text>

 元素中，它似乎可以在各种浏览器上实现您所期望的效果。

<svg height="240" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <!-- Border -->
    <rect width="120" height="120" style="stroke:pink;fill:white;stroke-width:3;" />
    <path d="M60,5 L60,115 M5,60 L115,60" stroke="pink" />

    <g transform="translate(60,0)">
        <text x="60" y="60" tabindex="0" focusable="true">
            <tspan x="0" dy="0">دولة الإمارات العربية</tspan>
            <title>دولة الإمارات العربية المتحدة</title>
        </text>
        <text x="60" y="60" tabindex="0" focusable="true">
            <tspan x="0" dy="20" style="fill: lightsalmon">المتحدة</tspan>
        </text>
    </g>

    <style>
        <![CDATA[
    text {
            font-weight: bold;
            fill: rgb(96, 94, 92);
            font-family: 'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif;
            font-size: 12px;
            text-anchor: middle;
        }
        ]]>
    </style>
</svg>

总的来说，我经常发现 Safari 的

Answer 3

行为粗略。如果可以的话，我发现将文本元素保留在自己的

<text>

 元素中，并将位置和样式直接附加到这些元素上更可靠。