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" >(thinktus.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"> (thinktus.com) 森客兔子.... </textPath> </text> </svg>测试看看‹/›
本示例定义了一条由水平线,对角线和曲线组成的文本路径。
运行后图像效果: