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属性を見ましたが、テキストが画面から消えました。 TB-RL

私の質問は、私が唯一のChromeの最新バージョンを気に、明示的なポジショニングまたは明示的な変換せずにそれを行うための方法があり、次のとおりです。

も同じ writing-modeが書き込みモードで起こったCSSを試してみましたか？

Answer 1

SVGはHTMLではありません。要素は、指示する場所に配置されます。 HTMLのような自動レイアウトはありません。

direction="rtl"を使用することができますが、Robertが言うように、状況に応じて適切な位置を設定する必要があります。

<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>