SVG <textpath>元素用于沿路径(例如，圆形)布置文本。这看起来很酷。不同的浏览器沿路径呈现文本的方式略有不同，因此请确保在计划支持的所有浏览器中检查文本的外观。

这是一个例子：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <path id="myTextPath"
              d="M75,20
                 a1,1 0 0,0 100,0
               "
                />
    </defs>

    <text x="10" y="100" style="stroke: #000000;">
      <textPath xlink:href="#myTextPath" >
            Text along a curved path...
      </textPath>
    </text>

</svg>

沿着弯曲路径的文字...注意<path>元素(在<defs>元素内部)如何具有id属性。这个id属性值是从<textpath>元素的xlink：href属性引用的。

如果路径的长度短于文本的长度，则仅绘制路径扩展范围内的文本部分。

我们也可以使用更高级的路径。这是一个更复杂的文本路径示例：

<defs>
    <path id="myTextPath2"
          d="M75,20 l100,0 l100,30 q0,100 150,100"/>
</defs>

<text x="10" y="100" style="stroke: #000000;">
    <textPath xlink:href="#myTextPath2">
        Text along a more advanced path with lines and curves.
    </textPath>
</text>

本示例定义了一条由水平线，对角线和曲线组成的文本路径。