SVG <textPath> 元素

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>
测试看看‹/›

运行后图像效果:

(cainiaoplus.com) 菜鸟教程...

注意<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>
测试看看‹/›

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

运行后图像效果:

(cainiaoplus.com) 菜鸟教程.