1# textPath 2 3沿路径绘制文本。 4 5 6> **说明：** 7> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - 按指定的路径绘制文本，可嵌套子标签tspan分段。 10> 11> - 只支持被父元素标签text嵌套。 12 13## 权限列表 14 15无 16 17 18## 子组件 19 20[tspan](js-components-svg-tspan.md)。 21 22 23## 属性 24 25 26支持以下表格中的属性。 27 28 29| 名称 | 类型 | 默认值 | 描述 | 30| -------------- | ---------------------------------- | ------ | ------------------------------------------------------------ | 31| id | string | - | 组件的唯一标识。 | 32| path | string | 0 | 设置路径的形状。<br/>字母指令表示的意义如下：<br/>- M = moveto<br/>- L = lineto<br/>- H = horizontal lineto<br/>- V = vertical lineto<br/>- C = curveto<br/>- S = smooth curveto<br/>- Q = quadratic Belzier curve<br/>- T = smooth quadratic Belzier curveto<br/>- A = elliptical Arc<br/>- Z = closepath<br/>默认值：0 | 33| startOffset | <length>\|<percentage> | 0 | 设置文本沿path绘制的起始偏移。<br/>默认值：0 | 34| font-size | <length> | 30px | 设置文本的尺寸。<br/>默认值：30px | 35| fill | <color> | black | 字体填充颜色。<br/>默认值：black | 36| by | number | - | 相对被指定动画的属性偏移值，from默认为原属性值。 | 37| opacity | number | 1 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。<br/>默认值：0 | 38| fill-opacity | number | 1.0 | 字体填充透明度。<br/>默认值：1.0 | 39| stroke | <color> | black | 绘制字体边框并指定颜色。<br/>默认值：black | 40| stroke-width | number | 1px | 字体边框宽度。<br/>默认值：1px | 41| stroke-opacity | number | 1.0 | 字体边框透明度。<br/>默认值：1.0 | 42 43 44## 示例 45 46textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素<path>曲线仅做参照） 47 48```html 49<!-- xxx.hml --> 50<div class="container"> 51 <svg fill="#00FF00" x="50"> 52 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path> 53 <text> 54 <textpath fill="blue" startOffset="20%" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px"> 55 This is textpath test. 56 </textpath> 57 </text> 58 </svg> 59</div> 60``` 61 62```css 63/* xxx.css */ 64.container { 65 flex-direction: row; 66 justify-content: flex-start; 67 align-items: flex-start; 68 height: 1200px; 69 width: 600px; 70} 71``` 72 73 74 75 76textpath与tspan组合示例与效果图 77 78```html 79<!-- xxx.hml --> 80<div class="container"> 81 <svg fill="#00FF00" x="50"> 82 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path> 83 <text> 84 <textpath fill="blue" startOffset="20%" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="15px"> 85 <tspan dx="-50px" fill="red">This is tspan onTextPath.</tspan> 86 <tspan font-size="25px">Let's play.</tspan> 87 <tspan font-size="30px" fill="#00FF00">12345678912354567891234567891234567891234567891234567890</tspan> 88 </textpath> 89 </text> 90 </svg> 91</div> 92``` 93 94 95 96```html 97<!-- xxx.hml --> 98<div class="container"> 99 <svg fill="#00FF00" x="50"> 100 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path> 101 <text> 102 <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px" stroke="black" stroke-width="1" > 103 This is TextPath. 104 <tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan> 105 <tspan font-size="30px">Let's play.</tspan> 106 <tspan font-size="40px" fill="#00FF00" stroke="blue" stroke-width="2">12345678912354567891234567891234567891234567891234567890 107 </tspan> 108 </textpath> 109 </text> 110 </svg> 111</div> 112``` 113 114 115 116```html 117<!-- xxx.hml --> 118<div class="container"> 119 <svg fill="#00FF00" x="50"> 120 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"> 121 </path> 122 <!-- 数值百分比 --> 123 <text> 124 <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px"> 125 This is TextPath. 126 <tspan x="50" fill="blue">This is first tspan.</tspan> 127 <tspan x="50%">This is second tspan.</tspan> 128 <tspan dx="10%">12345678912354567891234567891234567891234567891234567890</tspan> 129 </textpath> 130 </text> 131 </svg> 132</div> 133``` 134 135 136 137startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。 138 139```css 140/* xxx.css */ 141.container { 142 flex-direction: row; 143 justify-content: flex-start; 144 align-items: flex-start; 145 height: 3000px; 146 width: 1080px; 147} 148``` 149 150```html 151<!-- xxx.hml --> 152<div class="container"> 153 <svg fill="#00FF00"> 154 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path> 155 <text> 156 <textpath fill="blue" startOffset="10%" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="15px"> 157 <tspan dx="-50px" fill="red">This is tspan onTextPath.</tspan> 158 <tspan font-size="25px">Let's play.</tspan> 159 <tspan font-size="30px" fill="#00FF00">12345678912354567891234567891234567891234567891234567890</tspan> 160 <animate attributeName="startOffset" from="10%" to="40%" dur="3s" repeatCount="indefinite"></animate> 161 </textpath> 162 </text> 163 </svg> 164</div> 165``` 166 167 168 169textpath与tspan组合属性动画与效果图 170 171```html 172<!-- xxx.hml --> 173<div class="container"> 174 <svg fill="#00FF00"> 175 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"> 176 </path> 177 <text> 178 <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px"> 179 This is TextPath. 180 <tspan x="50" fill="blue"> 181 tspan attribute x|rotate 182 <animate attributeName="x" from="50" to="100" dur="5s" repeatCount="indefinite"></animate> 183 <animate attributeName="rotate" from="0" to="360" dur="5s" repeatCount="indefinite"></animate> 184 </tspan> 185 <tspan x="30%">tspan static.</tspan> 186 <tspan> 187 tspan attribute dx|opacity 188 <animate attributeName="dx" from="0%" to="30%" dur="3s" repeatCount="indefinite"></animate> 189 <animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 190 </tspan> 191 <tspan dx="5%">tspan move</tspan> 192 </textpath> 193 </text> 194 </svg> 195</div> 196``` 197 198 199 200(1) "tspan attribute x|rotate" 文本绘制起点偏移从50px运动到100px，顺时针旋转0度到360度。 201 202(2) "tspan attribute dx|opacity" 在 "tspan static." 绘制结束后再开始绘制，向后偏移量从0%运动到30%，透明度从浅到深变化。 203 204(3) "tspan move" 在上一段tspan绘制完成后，向后偏移5%的距离进行绘制，呈现跟随前一段tspan运动的效果。 205 206textpath与tspan组合属性动画与效果图 207 208```html 209<!-- xxx.hml --> 210<div class="container"> 211 <svg fill="#00FF00"> 212 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" 213 fill="none"> 214 </path> 215 <text> 216 <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px"> 217 This is TextPath. 218 <tspan dx="20" fill="blue"> 219 tspan attribute fill|fill-opacity 220 <animate attributeName="fill" from="blue" to="red" dur="3s" repeatCount="indefinite"></animate> 221 <animate attributeName="fill-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 222 </tspan> 223 <tspan dx="20" fill="blue"> 224 tspan attribute font-size 225 <animate attributeName="font-size" from="10" to="50" dur="3s" repeatCount="indefinite"></animate> 226 </tspan> 227 </textpath> 228 <tspan font-size="30">Single tspan</tspan> 229 </text> 230 </svg> 231</div> 232``` 233 234 235 236(1) "This is TextPath." 在path上无偏移绘制第一段文本内容，大小30px，颜色"\#D2691E"。 237 238(2) "tspan attribute fill|fill-opacity" 相对上一段文本结束后偏移20px，颜色从蓝到红，透明度从浅到深。 239 240(3) "tspan attribute font-size" 绘制起点相对上一段结束后偏移20px，起点静止，字体大小从10px到50px，整体长度持续拉长。 241 242(4) "Single tspan" 在上一段的尾部做水平绘制，呈现跟随上一段运动的效果。 243 244textpath与tspan组合属性动画与效果图 245 246```html 247<!-- xxx.hml --> 248<div class="container"> 249 <svg fill="#00FF00"> 250 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" 251 fill="none"> 252 </path> 253 <text> 254 <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px"> 255 This is TextPath. 256 <tspan dx="20" fill="blue"> 257 tspan attribute stroke 258 <animate attributeName="stroke" from="red" to="#00FF00" dur="3s" repeatCount="indefinite"></animate> 259 </tspan> 260 <tspan dx="20" fill="white" stroke="red"> 261 tspan attribute stroke-width-opacity 262 <animate attributeName="stroke-width" from="1" to="5" dur="3s" repeatCount="indefinite"></animate> 263 <animate attributeName="stroke-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 264 </tspan> 265 </textpath> 266 </text> 267 </svg> 268</div> 269``` 270 271 272 273(1) "tspan attribute stroke" 轮廓颜色从红色逐渐转变成绿色。 274 275(2) "tspan attribute stroke-width-opacity" 轮廓宽度从细1px转变粗5px，透明度从浅到深。 276
