1# text
2
3
4>  **NOTE**
5>
6>  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
7>
8>  - The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path.
9>
10>  - **\<text>** can be nested only by the parent element label **svg**.
11>
12>  - Only the default font **sans-serif** is supported.
13
14The **\<text>** component is used to display a piece of textual information.
15
16## Required Permissions
17
18None
19
20
21## Child Components
22
23The following are supported: [\<tspan>](js-components-svg-tspan.md), [\<textpath>](js-components-svg-textpath.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
24
25
26## Attributes
27
28The attributes in the following table are supported.
29
30| Name            | Type                                | Default Value  | Mandatory  | Description                                      |
31| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
32| id             | string                             | -     | No   | Unique ID of the component.                                |
33| x              | &lt;length&gt; \| &lt;percentage&gt; | 0     | No   | X-coordinate of the upper left corner of the component.                             |
34| y              | &lt;length&gt; \| &lt;percentage&gt; | 0     | No   | Y-coordinate of the upper left corner of the component.                             |
35| dx             | &lt;length&gt; \| &lt;percentage&gt; | 0     | No   | Offset of the text on the x-axis.                                |
36| dy             | &lt;length&gt; \| &lt;percentage&gt; | 0     | No   | Offset of the text on the y-axis.                                |
37| rotate         | number                             | 0     | No   | Rotation of the text around its lower left corner. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation.               |
38| font-size      | &lt;length&gt;                     | 30px  | No   | Font size.                                |
39| fill           | &lt;color&gt;                      | black | No   | Fill color of the text.                                  |
40| fill-opacity   | number                             | 1.0   | No   | Fill opacity of the text.                                 |
41| opacity        | number                             | 1     | No   | 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.|
42| stroke         | &lt;color&gt;                      | black | No   | Stroke color.                             |
43| stroke-width   | number                             | 1px   | No   | Stroke width.                                  |
44| stroke-opacity | number                             | 1.0   | No   | Stroke opacity.                                 |
45
46
47## Example
48
49```css
50/* xxx.css */
51.container {
52    flex-direction: row;
53    justify-content: flex-start;
54    align-items: flex-start;
55    height: 1000px;
56    width: 1080px;
57}
58```
59
60```html
61<!-- xxx.hml -->
62<div class="container">
63  <svg>
64    <text x="20px" y="0px" font-size="30" fill="blue">test x|y</text>
65    <text x="150" y="15" font-size="30" fill="blue">test x|y</text>
66    <text x="300" y="30" font-size="30" fill="blue" opacity="0.1">test opacity</text>
67    <text dx="20" y="30" dy="50" fill="blue" font-size="30">test dx|dy|fill|font-size</text>
68    <text x="20" y="150" fill="blue" font-size="30" fill-opacity="0.2">test fill-opacity</text>
69    <text x="20" y="200" fill="red" font-size="40">test 0123456789</text>
70    <text x="20" y="250" fill="red" font-size="40" fill-opacity="0.2">Test</text>
71    <text x="20" y="300" rotate="30" fill="red" font-size="40">test rotate</text>
72    <text x="20" y="350" fill="blue" font-size="40" stroke="red" stroke-width="2">test stroke</text>
73    <text x="20" y="400" fill="white" font-size="40" stroke="red" stroke-width="2" stroke-opacity="0.5">test stroke-opacity</text>
74  </svg>
75</div>
76```
77
78![text-part1](figures/text-part1.png)
79
80Attribute animation example
81
82```css
83/* xxx.css  */
84.container {
85    flex-direction: row;
86    justify-content: flex-start;
87    align-items: flex-start;
88    height: 3000px;
89    width: 1080px;
90}
91```
92
93```html
94<!-- xxx.hml -->
95<div class="container">
96  <svg>
97    <text y="50" font-size="30" fill="blue">
98        text attribute x|opacity|rotate
99      <animate attributeName="x" from="100" by="400" dur="3s" repeatCount="indefinite"></animate>
100      <animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate>
101      <animate attributeName="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animate>
102    </text>
103  </svg>
104</div>
105```
106
107![text-animate-part1](figures/text-animate-part1.gif)
108
109```html
110<!-- xxx.hml -->
111<div class="container">
112  <svg>
113    <text x="20" y="200" fill="blue">
114      text attribute font-size
115      <animate attributeName="font-size" from="10" to="50" dur="3s" repeatCount="indefinite">
116      </animate>
117    </text>
118  </svg>
119</div>
120```
121
122![text-animate-part2](figures/text-animate-part2.gif)
123
124```html
125<!-- xxx.hml -->
126<div class="container">
127  <svg>
128    <text x="20" y="250" font-size="25" fill="blue" stroke="red">
129      text attribute stroke
130      <animate attributeName="stroke" from="red" to="#00FF00" dur="3s" repeatCount="indefinite"></animate>
131    </text>
132    <text x="300" y="250" font-size="25" fill="white" stroke="red">
133      text attribute stroke-width-opacity
134      <animate attributeName="stroke-width" from="1" to="5" dur="3s" repeatCount="indefinite"></animate>
135      <animate attributeName="stroke-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate>
136    </text>
137  </svg>
138</div>
139```
140
141![text-animate-part3](figures/text-animate-part3.gif)
142