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>