1# textPath 2 3The **\<textPath>** component is used to draw text along the path. 4 5 6> **NOTE** 7> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> - This component can have **\<tspan>** components nested for segmenting. 10> 11> - This component can only be nested in the **\<text>** component. 12 13## Required Permissions 14 15None 16 17 18## Child Components 19 20The **[\<tspan>](js-components-svg-tspan.md)** child component is supported. 21 22 23## Attributes 24 25 26The attributes in the following table are supported. 27 28 29| Name | Type | Default Value| Description | 30| -------------- | ---------------------------------- | ------ | ------------------------------------------------------------ | 31| id | string | - | Unique ID of the component. | 32| path | string | 0 | Shape of the path.<br>The meanings of the letters are as follows:<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>Default value: **0**| 33| startOffset | <length>\|<percentage> | 0 | Offset of the text start point relative to the path start point.<br>Default value: **0** | 34| font-size | <length> | 30px | Font size.<br>Default value: **30px** | 35| fill | <color> | black | Font fill color.<br>Default value: **black** | 36| by | number | - | Attribute offset relative to the specified animation. By default, **from** is the original attribute value. | 37| opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.<br>Default value: **0**| 38| fill-opacity | number | 1.0 | Font fill opacity.<br>Default value: **1.0** | 39| stroke | <color> | black | Stroke color.<br>Default value: **black** | 40| stroke-width | number | 1px | Stroke width.<br>Default value: **1px** | 41| stroke-opacity | number | 1.0 | Stroke opacity.<br>Default value: **1.0** | 42 43 44## Example 45 46The following is an example of the **\<textspan>** attributes, where text is drawn along the path specified by **path**, and the start point is offset by 20% of the **path** length. (The drawn **\<path>** curve is for reference only.) 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 76Combination of **\<textpath>** and **\<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 <!-- Value percentage --> 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 137The following is an example of the **startOffset** animation, where the value of **startOffset** changes from 10% to 40%, and the text is not drawn when its length exceeds the path length range. 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 169Attribute animation of the **\<textPath>** and **\<tspan>** in combination 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"**: The beginning of the text is offset from 50 px to 100 px, and the text rotates clockwise by 0 degrees to 360 degrees. 201 202(2) **"tspan attribute dx|opacity"**: The text is drawn after the "tspan static." drawing is complete. The horizontal offset moves from 0% to 30%, and the opacity changes from shallow to deep. 203 204(3) **tspan move**: After the previous **\<tspan>** is drawn, the next **\<tspan>** is drawn with an offset of 5%, creating the effect of following the previous **\<tspan>**. 205 206Attribute animation of the **\<textPath>** and **\<tspan>** in combination 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."**: The first segment of text, in the size of 30px and color of \#D2691E is drawn on the path without offset. 237 238(2) **"tspan attribute fill|fill-opacity"**: The new segment of text is 20px offset from the end of the previous text segment. The text color changes from blue to red, and the opacity changes from light to deep. 239 240(3) **"tspan attribute font-size"**: The new segment of text is 20px offset from the end of the previous text segment. While the start point of the text is static, the font size shifts from 10px to 50px and the overall length is continuously prolonged. 241 242(4) **"Single tspan"**: A horizontal line is drawn at the end of the previous segment, creating the effect of following the previous segment. 243 244Attribute animation of the **\<textPath>** and **\<tspan>** in combination 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"**: The stroke color gradually changes from red to green. 274 275(2) **"tspan attribute stroke-width-opacity"**: The stroke width changes from 1px to 5px, and the opacity changes from shallow to deep. 276
