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" >(cainiaoplus.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"> (cainiaoplus.com) 菜鳥教程.... </textPath> </text> </svg>測試看看?/?
本示例定義了一條由水平線，對角線和曲線組成的文本路徑。
運行后圖像效果：