使用SVG，是否可以将文本添加到路径的中心并水平对齐？

Question

我想将文字添加到路径的中心并水平对齐，不沿路径对齐。

我在中心的路径上运行了以下文本，但我想显示它是水平的，无论路径朝向什么角度。

<text text-anchor="middle">
    <textPath xlink:href="#SomePath" startOffset="50%">Some Text</textPath>
</text>

Answer 1

如果我理解正确，你是在每个单独的字母之后（即指向北方），但是遵循路径。像这样：

查看当前SVG standard这似乎不太可能。

  

对于水平文本布局流程，   给定的参考方向   glyph是从the开始的向量   路径上的交叉点   字形附加哪个   指向方向90度   从的角度逆时针   交叉点处的曲线。

上面的图像是从SVG生成的，但是这是通过应用rotate属性对每个字母应用单独的字距调整（旋转）来实现的（正如你可以从瑕疵中看到的那样）：

  <text id="text2897">
    <textPath xlink:href="#path2890" id="textPath3304">
      <tspan
        rotate="69.238731 53.737518 40.30315 24.801943 358.96658 358.96658 4.1336575 357.93317 351.73267 351.73267 351.73267 348.63242 343.46533 343.46533 346.56558 347.599 347.599 347.599 347.599 347.599 347.599 346.56558 345.53217 344.49875 343.46533"
        id="tspan2899">
        Some sample text for path
      </tspan>
    </textPath>
  </text>

Answer 2

您可以非常轻松地在脚本中计算旋转所需的调整：

var tp = document.getElementById("textpath");
var rotate = "";
for(var i = 0; i < tp.getNumberOfChars(); i++)
{
  rotate += -tp.getRotationOfChar(i) + " ";
}
tp.setAttribute("rotate", rotate);