如何使文本沿 SVG 曲线居中？

Question

有没有办法让 SVG 中的文本沿着曲线居中？

<svg width="100" height="25" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="intermediate" d="M 7 5 C 25 25, 75 25, 93 5"/>
    </defs>
    <text fill="#105ca6">
        <textPath style="alignment-baseline: baseline;" xlink:href="#intermediate">Intermediate</textPath>
    </text>
</svg>

Answer 1

首先你需要使用startOffset="50%". startOffset 属性定义初始当前文本位置距路径起点的偏移量。这将使文本从路径的中间开始。

接下来，您需要使用text-anchor="middle"围绕起点对齐文本，在本例中是路径的中间。

<svg width="100" height="25" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="intermediate" d="M 7 5 C 25 25, 75 25, 93 5" />
  </defs>
  <text fill="#105ca6">
    <textPath startOffset="50%" dominant-baseline="middle" text-anchor="middle" xlink:href="#intermediate">Intermediate</textPath>
  </text>
</svg>