SVG <textpath>元素用于沿路径（例如，圆形）布置文本,效果看起来很酷。不同的浏览器沿路径呈现文本的方式略有不同，因此请确保在支持的浏览器中检查文本的外观。
<svg width="500" height="250">
<defs>
<path id="myTextPath" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="20" y="80" style="stroke: #000000;">
<textPath xlink:href="#myTextPath" >(cainiaojc.com) 菜鸟教程...</textPath>
</text>
</svg>测试看看‹/›运行后图像效果：
注意<path>元素（在元素内部<defs>）如何具有 id属性。此id属性值是从元素的xlink:href 属性引用的<textpath>。
如果路径的长度短于文本的长度，则仅绘制文本在路径扩展范围内的部分。
您也可以使用更高级的路径。这是一个更复杂的文本路径示例：
<svg width="500" height="200">
<defs>
<path id="myTextPath2"
d="M75,20 l100,0 l100,30 q0,100 150,100"/>
</defs>
<text x="20" y="40" style="stroke: #000000;">
<textPath xlink:href="#myTextPath2">
(cainiaojc.com) 菜鸟教程....
</textPath>
</text>
</svg>测试看看‹/›本示例定义了一条由水平线，对角线和曲线组成的文本路径。
运行后图像效果：