# textPath
The **** component is used to draw text along the path.
> **NOTE:**
>- The APIs of this module are supported since API version 7.
>- Draws text based on the specified path. The **tspan** child component can be nested for segmenting.
>- **** can be nested only by the parent element label **svg**.
## Permission List
None
## Child Components
**tspan** is supported.
## Attributes
The attributes in the following table are supported.
Name
Type
Default Value
Mandatory
Description
id
string
-
No
Unique ID of the component.
path
string
0
Yes
Shape of the path.
The meanings of the letters are as follows:
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
No
Start offset of the text drawing along the path.
font-size
<length>
30px
No
Font size.
fill
<color>
black
No
Font fill color.
opacity
number
1
No
Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.
fill-opacity
number
1.0
No
Font fill transparency.
stroke
<color>
black
No
Stroke and stroke color.
stroke-width
number
1px
No
Stroke width.
stroke-opacity
number
1.0
No
Stroke transparency.
## Example
The following is an example of the **textspan** attribute. The **textpath** text is drawn along the path specified by the **path** attribute, and the start point is offset by 20% of the **path** length. \(The drawn element **** curve is for reference only.\)
```
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
```
```
Combination of **textpath** and **tspan**
```
```
```
```
```
```
The following is an example of the **startOffset** animation. When the text is drawn, the start offset is moved from 10% to 40%, and the text whose length exceeds the path length range is not drawn.
```
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 3000px;
width: 1080px;
}
```
```
```
Animation and effect of the combination of **textpath** and **tspan**
```
```
\(1\) "tspan attribute x|rotate" indicates that the text drawing start point moves from 50 px to 100 px and rotates clockwise by 0 degrees to 360 degrees.
\(2\) "tspan attribute dx|opacity" is drawn after the "tspan static." drawing is complete. The offset moves from 0% to 30%, and the transparency changes from shallow to deep.
\(3\) **tspan move**: After the previous **tspan** is drawn, the next tspan is drawn with an offset of 5% to show the effect of following the previous **tspan**.
Animation and effect of the combination of **textpath** and **tspan**
```
```
\(1\) **This is TextPath**.: Draw the first paragraph of text on the path without offset. The size is 30px, and the color is "\#D2691E".
\(2\) The value of **tspan attribute fill|fill-opacity** is 20px offset from the end of the previous text segment. The color is from blue to red, and the transparency is from light to deep.
\(3\) **tspan attribute font-size**: The drawing start point is 20px offset from the end of the previous segment. The start point is static, and the font size ranges from 10px to 50px. The overall length is continuously prolonged.
\(4\) **Single tspan**: Draw a horizontal line at the end of the previous segment to follow the previous segment.
Animation and effect of the combination of **textpath** and **tspan**
```
```
\(1\) **tspan attribute stroke**: The stroke color gradually changes from red to green.
\(2\) **tspan attribute stroke-width-opacity**: The contour width is changed from 1px to 5px, and the transparency is changed from shallow to deep.