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

Question

我想将文本添加到路径的中心并水平对齐,而不是沿路径对齐.

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

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

Answer 1

如果我理解正确的话，你是在每个单独的字母都是笔直的（即指向北）但遵循路径的。像这样的东西：

从当前的SVG 标准来看，这似乎是不可能的。

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

上面的图像是从 SVG 生成的，但这是通过应用旋转属性对每个字母应用单独的字距调整（旋转）来实现的（从缺陷中可以看出）：

  <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>