SVG textPath 沿路径正确对齐文本答案

【问题标题】：SVG textPath align text properly along the pathSVG textPath 沿路径正确对齐文本
【发布时间】：2014-05-13 20:36:17
【问题描述】：

我想沿我的 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 解决方案，我们都表示赞赏。

【问题讨论】：

标签： javascript svg snap.svg

【解决方案1】：

只需反转绘制路径的方向即可。如果这样做，文本将位于行的另一侧。

在这种情况下，您正在使用没有先前路径段的“S”路径命令，因此计算反向路径有点棘手。这是您的示例路径的反面：

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

【讨论】：

谢谢。我想了想，只是不知道有更好的方法可以达到相同的结果。我对 SVG 比较陌生，所以感谢您澄清这一点！