css - SVG:相反方向的文本

Question

我正在寻找一种解决方案，以便在我的 SVG 图形的正确位置包含一个 SVG 文本标签，所以我输入了:

<svg width = "300" height = "200">
  <text x = "200" y = "100">Foo</text>
</svg>

渲染成这样:

example 1
=========

+--------------------+
|                    |
|                    |
|             Foo -> |
|                    |
|                    |
+--------------------+

问题是，我希望文本方向(或任何所谓的)是从右侧站点到左侧，

example 2
=========

+--------------------+
|                    |
|                    |
|             <- Foo |
|                    |
|                    |
+--------------------+

到目前为止我尝试了两件事:

1. <text x = "200" y = "100" writing-mode = "rl-tb">Foo</text>如 MDN 所述

2. <text x = "200" y = "100" text-anchor = "end">Foo</text>如 MDN 所述

两个结果看起来都像示例 1。 有谁知道得到示例 2 结果的解决方案？

Answer 1

我认为你只是想要 text-anchor="end"。

<svg width = "300" height = "200">
    <rect width="300" height="200" fill="yellow" opacity="0.5"/>
  <text x = "300" y = "100" text-anchor="end">Foo</text>
</svg>