# textPath 沿路径绘制文本。 >![](../../public_sys-resources/icon-note.gif) **说明：** >- 从API Version 7 开始支持。 >- 按指定的路径绘制文本，可嵌套子标签tspan分段。 >- 只支持被父元素标签text嵌套。 ## 权限列表无 ## 子组件 tspan。 ## 属性支持以下表格中的属性。

名称	类型	默认值	必填	描述
id	string	-	否	组件的唯一标识。
path	string	0	是	设置路径的形状。字母指令表示的意义如下： M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z = closepath
startOffset	<length>\|<percentage>	0	否	设置文本沿path绘制的起始偏移。
font-size	<length>	30px	否	设置文本的尺寸。
fill	<color>	black	否	字体填充颜色
opacity	number	1	否	元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。
fill-opacity	number	1.0	否	字体填充透明度
stroke	<color>	black	否	绘制字体边框并指定颜色
stroke-width	number	1px	否	字体边框宽度
stroke-opacity	number	1.0	否	字体边框透明度

## 示例 textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素曲线仅做参照）。 ``` /* xxx.css */ .container { flex-direction: row; justify-content: flex-start; align-items: flex-start; height: 1200px; width: 600px; } ``` ```

``` ![](figures/textPath-part1.png) textpath与tspan组合示例与效果图 ```

``` ![](figures/textPath-part2.png) ```

``` ![](figures/textPath-part3.png) ```

``` ![](figures/textPath-part4.png) startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。 ``` .container { flex-direction: row; justify-content: flex-start; align-items: flex-start; height: 3000px; width: 1080px; } ``` ```

``` ![](figures/textpath-animate1.gif) textpath与tspan组合属性动画与效果图 ```

``` ![](figures/textpath-animate2.gif) \(1\) "tspan attribute x|rotate" 文本绘制起点偏移从50px运动到100px，顺时针旋转0度到360度。 \(2\) "tspan attribute dx|opacity" 在 "tspan static." 绘制结束后再开始绘制，向后偏移量从0%运动到30%，透明度从浅到深变化。 \(3\) "tspan move" 在上一段tspan绘制完成后，向后偏移5%的距离进行绘制，呈现跟随前一段tspan运动的效果。 textpath与tspan组合属性动画与效果图 ```

``` ![](figures/textpath-animate3.gif) \(1\) "This is TextPath." 在path上无偏移绘制第一段文本内容，大小30px，颜色"\#D2691E"。 \(2\) "tspan attribute fill|fill-opacity" 相对上一段文本结束后偏移20px，颜色从蓝到红，透明度从浅到深。 \(3\) "tspan attribute font-size" 绘制起点相对上一段结束后偏移20px，起点静止，字体大小从10px到50px，整体长度持续拉长。 \(4\) "Single tspan" 在上一段的尾部做水平绘制，呈现跟随上一段运动的效果。 textpath与tspan组合属性动画与效果图 ```

``` ![](figures/textpath-animate4.gif) \(1\) "tspan attribute stroke" 轮廓颜色从红色逐渐转变成绿色。 \(2\) "tspan attribute stroke-width-opacity" 轮廓宽度从细1px转变粗5px，透明度从浅到深。