第 17 天：如何使用 SVG 沿路径绘制文本

绘制形状并不是路径的唯一用途。我们还可以使用路径沿不可见路径渲染文字。我们可以在 "定义 "部分定义一条路径，然后在 textPath 元素中使用它，让文字绕着圆圈移动。这里我们再次使用了弧线，但也可以使用任何其他路径，文字都会沿着描边移动。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <path id="text-arc" d="M 0, 50 A 50 50 0 1 1 1,50" />
  </defs>

  <text
    fill="#0c5c4c"
    font-family="Tahoma"
    font-size="0.77em"
    font-weight="bold"
  >
    <textPath href="#text-arc">
     生日快乐！生日快乐！祝你生日快乐！有生的日子天天快乐！
    </textPath>
  </text>
</svg>