详细介绍SVG的textPath文本路径元素，学习如何让文本沿着路径排列。通过实例掌握文本路径的各种应用技巧。 textPath元素让文本沿着指定的路径排列，可以创建弧形文字、圆形文字等独特效果。
<defs>
<path id="路径ID" d="路径数据"/>
</defs>
<text>
<textPath href="#路径ID">文本内容</textPath>
</text>
文本沿着定义的曲线路径排列。
<defs>
<path id="curve1" d="M 30,100 Q 150,20 270,100" fill="none"/>
</defs>
<text font-size="18" fill="#3498db">
<textPath href="#curve1">
文本沿着曲线路径排列展示
</textPath>
</text>
文本沿着圆形路径排列，常用于Logo设计。
<defs>
<path id="circle-top" d="M 50,100 A 50,50 0 0 1 250,100" fill="none"/>
<path id="circle-bottom" d="M 250,100 A 50,50 0 0 1 50,100" fill="none"/>
</defs>
<circle cx="150" cy="100" r="50" fill="none" stroke="#3498db" stroke-width="2"/>
<text font-size="14" fill="#e74c3c">
<textPath href="#circle-top" startOffset="50%" text-anchor="middle">
SVG CIRCULAR TEXT
</textPath>
</text>
<text font-size="12" fill="#2ecc71">
<textPath href="#circle-bottom" startOffset="50%" text-anchor="middle">
圆形路径文本示例
</textPath>
</text>
startOffset属性控制文本在路径上的起始位置。
<defs>
<path id="line-path" d="M 30,50 L 270,50" fill="none"/>
</defs>
<text font-size="14" fill="#3498db">
<textPath href="#line-path" startOffset="0%">
起点开始
</textPath>
</text>
<text font-size="14" fill="#e74c3c">
<textPath href="#line-path" startOffset="50%">
中间开始
</textPath>
</text>
<text font-size="14" fill="#2ecc71">
<textPath href="#line-path" startOffset="80%">
偏后开始
</textPath>
</text>
method属性控制文本沿路径的排列方式。
<defs>
<path id="curve-method" d="M 30,80 Q 150,20 270,80" fill="none"/>
</defs>
<text font-size="16" fill="#3498db">
<textPath href="#curve-method" method="align">
align对齐方法
</textPath>
</text>
<text font-size="16" fill="#e74c3c">
<textPath href="#curve-method" method="stretch">
stretch拉伸方法
</textPath>
</text>
spacing属性控制字符间距的处理方式。
<text font-size="14" fill="#3498db">
<textPath href="#spacing-path" spacing="auto">
auto自动间距
</textPath>
</text>
<text font-size="14" fill="#e74c3c">
<textPath href="#spacing-path" spacing="exact">
exact精确间距
</textPath>
</text>
<defs>
<path id="wave" d="M 0,50 Q 37.5,30 75,50 T 150,50 T 225,50 T 300,50" fill="none"/>
</defs>
<text font-size="20" fill="#3498db" font-weight="bold">
<textPath href="#wave">
波浪形状的文字效果展示
</textPath>
</text>
<defs>
<path id="badge-top" d="M 70,100 A 80,80 0 0 1 230,100" fill="none"/>
<path id="badge-bottom" d="M 230,100 A 80,80 0 0 1 70,100" fill="none"/>
</defs>
<circle cx="150" cy="100" r="80" fill="#3498db"/>
<circle cx="150" cy="100" r="70" fill="#2980b9"/>
<text font-size="14" fill="white" font-weight="bold">
<textPath href="#badge-top" startOffset="50%" text-anchor="middle">
PREMIUM QUALITY
</textPath>
</text>
<text font-size="12" fill="white">
<textPath href="#badge-bottom" startOffset="50%" text-anchor="middle">
SINCE 2024
</textPath>
</text>
<defs>
<path id="spiral" d="M 150,100
A 10,10 0 0 1 160,100
A 20,20 0 0 1 140,100
A 30,30 0 0 1 170,100
A 40,40 0 0 1 130,100
A 50,50 0 0 1 180,100
A 60,60 0 0 1 120,100" fill="none"/>
</defs>
<text font-size="12" fill="#3498db">
<textPath href="#spiral">
螺旋形状的文字排列效果展示
</textPath>
</text>
| 属性 | 说明 | 值 |
|---|---|---|
| href | 引用路径 | #路径ID |
| startOffset | 起始偏移 | 百分比或数值 |
| method | 排列方法 | align / stretch |
| spacing | 间距方式 | auto / exact |