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>测试看看‹/›
本示例定义了一条由水平线，对角线和曲线组成的文本路径。
运行后图像效果：