# tspan >![](../../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 **** child component can be nested. >- **** can be nested only by the parent element label **svg**. ## Permission List None ## Child Components Tspan is supported. 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. This parameter is invalid for the textpath child 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. This parameter is invalid for the textpath child component.

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.

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 ``` /* xxx.css */ .container { flex-direction: row; justify-content: flex-start; align-items: flex-start; height: 1000px; width: 1080px; } ``` ```
zero text. first span. second span. third span. first span. second span. third span. forth span.
``` ![](figures/tspan-part1.png) Attribute animation example ``` /* xxx.css */ .container { flex-direction: row; justify-content: flex-start; align-items: flex-start; height: 3000px; width: 1080px; } ``` ```
tspan attribute x|opacity|rotate tspan attribute dx
``` ![](figures/tspan-animate-part1.gif) ```
tspan attribute fill|fill-opacity
``` ![](figures/tspan-animate-part2.gif) ```
tspan attribute font-size
``` ![](figures/tspan-animate-part3.gif) ```
tspan attribute stroke tspan attribute stroke-width-opacity
``` ![](figures/tspan-animate-part4.gif)