# text The **** component is used to display a piece of textual information. >![](../../public_sys-resources/icon-note.gif) **NOTE:** >- The APIs of this module are supported since API version 7. >- 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. >- **** can be nested only by the parent element label **svg**. >- Only the default font **sans-serif** is supported. ## Permission List None ## Child Components **Tspan**, **textpath**, **animate**, and **animateTransform are** supported. ## Attributes The attributes in the following table are supported.

Name

Type

Default Value

Mandatory

Description

id

string

-

No

Unique ID of the component.

x

<length>|<percentage>

0

No

X-coordinate of the upper left corner of the component.

y

<length>|<percentage>

0

No

Y-coordinate of the upper left corner of the component.

dx

<length>|<percentage>

0

No

Offset of the text on the x-axis.

dy

<length>|<percentage>

0

No

Offset of the text on the y-axis.

rotate

number

0

No

Rotates the lower left corner of the font based on the circle center. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation.

font-size

<length>

30px

No

Font size.

fill

<color>

black

No

Font fill color.

fill-opacity

number

1.0

No

Font fill transparency.

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.

stroke

<color>

black

No

Stroke and stroke color.

stroke-width

number

1px

No

Stroke width.

stroke-opacity

number

1.0

No

Stroke transparency.
## Example ``` /* xxx.css */ .container { flex-direction: row; justify-content: flex-start; align-items: flex-start; height: 1000px; width: 1080px; } ``` ```
test x|y test x|y test opacity test dx|dy|fill|font-size test fill-opacity test 0123456789 Test Chinese test rotate test stroke test stroke-opacity
``` ![](figures/text-part1.png) Attribute animation example ``` /* xxx.css */ .container { flex-direction: row; justify-content: flex-start; align-items: flex-start; height: 3000px; width: 1080px; } ``` ```
text attribute x|opacity|rotate
``` ![](figures/text-animate-part1.gif) ```
text attribute font-size
``` ![](figures/text-animate-part2.gif) ```
text attribute stroke text attribute stroke-width-opacity
``` ![](figures/text-animate-part3.gif)