diff --git a/en/application-dev/reference/arkui-js/js-components-svg-text.md b/en/application-dev/reference/arkui-js/js-components-svg-text.md index 4b9887758b264f6c9134537190ed62dae5751d83..41a4f5086f80cae11ed3be3f0ded52ebc2b75c64 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-text.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-text.md @@ -1,187 +1,51 @@ -# text +# text -The **** component is used to display a piece of textual information. +The **\** component is used to display a piece of textual information. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ->- 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. -## Required Permissions +> **NOTE** +> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> +> - 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. + +## Required Permissions None -## Child Components -**Tspan**, **textpath**, **animate**, and **animateTransform are** supported. +## Child Components -## Attributes +The **\**, **\**, **\**, and **\** child components are 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.

-

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 opacity.

-

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.

-

stroke

-

<color>

-

black

-

No

-

Stroke and stroke color.

-

stroke-width

-

number

-

1px

-

No

-

Stroke width.

-

stroke-opacity

-

number

-

1.0

-

No

-

Stroke opacity.

-
+## Attributes -## Example +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 | Rotation of the text around its lower left corner. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. | +| font-size | <length> | 30px | No | Font size. | +| fill | <color> | black | No | Fill color of the text. | +| fill-opacity | number | 1.0 | No | Fill opacity of the text. | +| 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.| +| stroke | <color> | black | No | Stroke and stroke color. | +| stroke-width | number | 1px | No | Stroke width. | +| stroke-opacity | number | 1.0 | No | Stroke opacity. | + + +## Example + +```css /* xxx.css */ .container { flex-direction: row; @@ -192,7 +56,7 @@ The attributes in the following table are supported. } ``` -``` +```html
@@ -202,7 +66,7 @@ The attributes in the following table are supported. test dx|dy|fill|font-size test fill-opacity test 0123456789 - Test Chinese + Test test rotate test stroke test stroke-opacity @@ -210,11 +74,11 @@ The attributes in the following table are supported.
``` -![](figures/text-part1.png) +![text-part1](figures/text-part1.png) Attribute animation example -``` +```css /* xxx.css */ .container { flex-direction: row; @@ -225,23 +89,23 @@ Attribute animation example } ``` -``` +```html
+ text attribute x|opacity|rotate - text attribute x|opacity|rotate
``` -![](figures/text-animate-part1.gif) +![text-animate-part1](figures/text-animate-part1.gif) -``` +```html
@@ -254,9 +118,9 @@ Attribute animation example
``` -![](figures/text-animate-part2.gif) +![text-animate-part2](figures/text-animate-part2.gif) -``` +```html
@@ -273,5 +137,4 @@ Attribute animation example
``` -![](figures/text-animate-part3.gif) - +![text-animate-part3](figures/text-animate-part3.gif)