1# tspan
2
3添加文本样式。
4
5
6>  **说明：**
7>  - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9>  - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。
10>
11>  - 文本分段，只支持被父元素标签svg嵌套。
12
13## 权限列表
14
15无
16
17
18## 子组件
19
20支持[tspan](js-components-svg-tspan.md)。
21
22
23支持以下表格中的属性。
24
25
26| 名称             | 类型                                 | 默认值   | 必填   | 描述                                       |
27| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
28| id             | string                             | -     | 否    | 组件的唯一标识。                                 |
29| x              | <length>\|<percentage> | 0     | 否    | 设置组件左上角x轴坐标。                             |
30| y              | <length>\|<percentage> | 0     | 否    | 设置组件左上角y轴坐标。作为textpath子组件时失效。            |
31| dx             | <length>\|<percentage> | 0     | 否    | 设置文本x轴偏移。                                |
32| dy             | <length>\|<percentage> | 0     | 否    | 设置文本y轴偏移。作为textpath子组件时失效。               |
33| rotate         | number                             | 0     | 否    | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。               |
34| font-size      | <length>                     | 30px  | 否    | 设置文本的尺寸。                                 |
35| fill           | <color>                      | black | 否    | 字体填充颜色。                                  |
36| opacity        | number                             | 1     | 否    | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
37| fill-opacity   | number                             | 1.0   | 否    | 字体填充透明度。                                 |
38| stroke         | <color>                      | black | 否    | 绘制字体边框并指定颜色。                             |
39| stroke-width   | number                             | 1px   | 否    | 字体边框宽度。                                  |
40| stroke-opacity | number                             | 1.0   | 否    | 字体边框透明度。                                 |
41
42## 示例
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![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png)
76
77属性动画示例
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![zh-cn_image_0000001127285008](figures/zh-cn_image_0000001127285008.gif)
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![zh-cn_image_0000001127125198](figures/zh-cn_image_0000001127125198.gif)
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![zh-cn_image_0000001173164863](figures/zh-cn_image_0000001173164863.gif)
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![zh-cn_image_0000001127125200](figures/zh-cn_image_0000001127125200.gif)
170