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