javascript - 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")