SVG文字书写方向

Question

考虑以下包含RTL文本的svg：

<svg viewBox='0 0 1024 80'  >
  <rect x='1' y='1' width='1022' height='78' style='fill:#fff;stroke:#3fa9f5;'></rect>
  <text style='dominant-baseline:text-before-edge;font-size:65px'>مرحبا</text>
</svg>

它显示如下：

我试图让它在没有明确定位或变换的情况下显示如下：

我尝试了什么：

我查看了direction属性，但文字显示在屏幕上。

同样尝试了css writing-mode同样的写作模式：tb-rl

我的问题是，如果没有明确的定位或显式转换，有没有办法做到这一点，我只关心最新版本的Chrome？

Answer 1

SVG不是HTML。元素位于您告诉他们的位置。 HTML中没有自动布局。

你可以使用direction="rtl"，但正如罗伯特所说，你仍然需要根据情况恰当地定位它。

<svg viewBox='0 0 1024 80'  >
  <rect x='1' y='1' width='1022' height='78' style='fill:#fff;stroke:#3fa9f5;'></rect>
  <text style='dominant-baseline:text-before-edge;font-size:65px' x="1024" direction="rtl">مرحبا</text>
</svg>