SVG textPath沿路徑正確對齊文本

Question

我希望沿着我的SVG路徑對齊文本，但是，看起來，SVG不希望將它與所有字母的正確旋轉對齊：

如何在曲線上方對齊文本，以便它可讀，而不是如上圖所示？

我使用Snap.SVG庫來進行SVG操作，我的代碼如下所示：

var path = snapelement.path("M 540,0 S 150, 460, 150, 540")
           .attr({fill : "transparent", stroke : "#000", strokeWidth : 4})

var note = snapelement.text(0, 0, "EXAMPLE TEXT")
           .attr({"textpath" : path, "font-family" : "Helvetica Neue", "font-size" : 14});

任何建議，甚至是純SVG解決方案，都表示贊賞。

Answer 1

只需反轉繪制路徑的方向即可。 如果這樣做，文本將位於該行的另一側。

在這種情況下，您使用的是沒有前一個路徑段的“S”路徑命令，因此計算反向路徑有點棘手。 以下是您的示例路徑的反向：

var path = snapelement.path("M 150,540 C 150,540, 150,460, 540,0")