1# tspan 2 3The **\<tspan>** component is used to add a text style. 4 5 6> **NOTE** 7> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> - This component can have **\<tspan>** child components nested. 10> 11> - This component can only be nested by the parent element label **svg**. 12 13## Required Permissions 14 15None 16 17 18## Child Components 19 20The **[\<tspan>](js-components-svg-tspan.md)** child component is supported. 21 22## Attributes 23 24 25The attributes in the following table are supported. 26 27 28| Name | Type | Default Value | Mandatory | Description | 29| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- | 30| id | string | - | No | Unique ID of the component. | 31| x | <length>\|<percentage> | 0 | No | X-coordinate of the upper left corner of the component. | 32| y | <length>\|<percentage> | 0 | No | Y-coordinate of the upper left corner of the component. This attribute is invalid when the component is a child component of the **\<textpath>**. | 33| dx | <length>\|<percentage> | 0 | No | Offset of the text on the x-axis. | 34| dy | <length>\|<percentage> | 0 | No | Offset of the text on the y-axis. This attribute is invalid when the component is a child component of the **\<textpath>**. | 35| 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. | 36| font-size | <length> | 30px | No | Font size. | 37| fill | <color> | black | No | Fill color of the text. | 38| 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.| 39| fill-opacity | number | 1.0 | No | Fill opacity of the text. | 40| stroke | <color> | black | No | Stroke color. | 41| stroke-width | number | 1px | No | Stroke width. | 42| stroke-opacity | number | 1.0 | No | Stroke opacity. | 43 44## Example 45 46```html 47<!-- xxx.hml --> 48<div class="container"> 49 <svg > 50 <text x="20" y="500" fill="#D2691E" font-size="20"> 51 zero text. 52 <tspan>first span.</tspan> 53 <tspan fill="red" font-size="35">second span.</tspan> 54 <tspan fill="#D2691E" font-size="40" rotate="10">third span.</tspan> 55 </text> 56 <text x="20" y="550" fill="#D2691E" font-size="20"> 57 <tspan dx="-5" fill-opacity="0.2">first span.</tspan> 58 <tspan dx="5" fill="red" font-size="25" fill-opacity="0.4">second span.</tspan> 59 <tspan dy="-5" fill="#D2691E" font-size="35" rotate="-10" fill-opacity="0.6">third span.</tspan> 60 <tspan fill="#blue" font-size="40" rotate="10" fill-opacity="0.8" stroke="#00FF00" stroke-width="1px">forth span.</tspan> 61 </text> 62 </svg> 63</div> 64``` 65 66```css 67/* xxx.css */ 68.container { 69 flex-direction: row; 70 justify-content: flex-start; 71 align-items: flex-start; 72 height: 1000px; 73 width: 1080px; 74} 75``` 76 77 78 79Attribute animation example 80 81```html 82<!-- xxx.hml --> 83<div class="container"> 84 <svg> 85 <text y="300" font-size="30" fill="blue"> 86 <tspan> 87 tspan attribute x|opacity|rotate 88 <animate attributeName="x" from="-100" to="400" dur="3s" repeatCount="indefinite"></animate> 89 <animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 90 <animate attributeName="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animate> 91 </tspan> 92 </text> 93 94 <text y="350" font-size="30" fill="blue"> 95 <tspan> 96 tspan attribute dx 97 <animate attributeName="dx" from="-100" to="400" dur="3s" repeatCount="indefinite"></animate> 98 </tspan> 99 </text> 100 </svg> 101</div> 102``` 103 104```css 105/* xxx.css */ 106.container { 107 flex-direction: row; 108 justify-content: flex-start; 109 align-items: flex-start; 110 height: 3000px; 111 width: 1080px; 112} 113``` 114 115 116 117```html 118<!-- xxx.hml --> 119<div class="container"> 120 <svg> 121 <text> 122 <tspan x="0" y="550" font-size="30"> 123 tspan attribute fill|fill-opacity 124 <animate attributeName="fill" from="blue" to="red" dur="3s" repeatCount="indefinite"></animate> 125 <animate attributeName="fill-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 126 </tspan> 127 </text> 128 </svg> 129</div> 130``` 131 132 133 134```html 135<!-- xxx.hml --> 136<div class="container"> 137 <svg> 138 <text> 139 <tspan x="20" y="600" fill="red"> 140 tspan attribute font-size 141 <animate attributeName="font-size" from="10" to="50" dur="3s" repeatCount="indefinite"></animate> 142 </tspan> 143 </text> 144 </svg> 145</div> 146``` 147 148 149 150```html 151<!-- xxx.hml --> 152<div class="container"> 153 <svg> 154 <text> 155 <tspan x="20" y="650" font-size="25" fill="blue" stroke="red"> 156 tspan attribute stroke 157 <animate attributeName="stroke" from="red" to="#00FF00" dur="3s" repeatCount="indefinite"></animate> 158 </tspan> 159 </text> 160 <text> 161 <tspan x="300" y="650" font-size="25" fill="white" stroke="red"> 162 tspan attribute stroke-width-opacity 163 <animate attributeName="stroke-width" from="1" to="5" dur="3s" repeatCount="indefinite"></animate> 164 <animate attributeName="stroke-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 165 </tspan> 166 </text> 167 </svg> 168</div> 169``` 170 171 172
