1# tspan<a name="ZH-CN_TOPIC_0000001209817107"></a> 2 3> **说明：** 4>- 从API Version 7 开始支持。 5>- 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。 6>- 文本分段，只支持被父元素标签svg嵌套。 7 8## 权限列表<a name="zh-cn_topic_0000001173324671_section11257113618419"></a> 9 10无 11 12## 子组件<a name="zh-cn_topic_0000001173324671_section9288143101012"></a> 13 14支持tspan。 15 16支持以下表格中的属性。 17 18<a name="zh-cn_topic_0000001173324671_table20633101642315"></a> 19<table><thead align="left"><tr id="zh-cn_topic_0000001173324671_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173324671_aaf1247770b244944bbcc9f28d9a6f00b"><a name="zh-cn_topic_0000001173324671_aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="zh-cn_topic_0000001173324671_aaf1247770b244944bbcc9f28d9a6f00b"></a>名称</p> 20</th> 21<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173324671_a6efc3502761f4faf9630e484280f75b6"><a name="zh-cn_topic_0000001173324671_a6efc3502761f4faf9630e484280f75b6"></a><a name="zh-cn_topic_0000001173324671_a6efc3502761f4faf9630e484280f75b6"></a>类型</p> 22</th> 23<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173324671_a27a37273d9ad47569ddbcb8db985d302"><a name="zh-cn_topic_0000001173324671_a27a37273d9ad47569ddbcb8db985d302"></a><a name="zh-cn_topic_0000001173324671_a27a37273d9ad47569ddbcb8db985d302"></a>默认值</p> 24</th> 25<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173324671_p824610360217"><a name="zh-cn_topic_0000001173324671_p824610360217"></a><a name="zh-cn_topic_0000001173324671_p824610360217"></a>必填</p> 26</th> 27<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173324671_a2ff3361bfd3b420ba4967452d2ddd098"><a name="zh-cn_topic_0000001173324671_a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="zh-cn_topic_0000001173324671_a2ff3361bfd3b420ba4967452d2ddd098"></a>描述</p> 28</th> 29</tr> 30</thead> 31<tbody><tr id="zh-cn_topic_0000001173324671_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_a83b6dd280109466fb015e64de1ef4df3"><a name="zh-cn_topic_0000001173324671_a83b6dd280109466fb015e64de1ef4df3"></a><a name="zh-cn_topic_0000001173324671_a83b6dd280109466fb015e64de1ef4df3"></a>id</p> 32</td> 33<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_abc38fa2b85854bc687af75eb17a00a4d"><a name="zh-cn_topic_0000001173324671_abc38fa2b85854bc687af75eb17a00a4d"></a><a name="zh-cn_topic_0000001173324671_abc38fa2b85854bc687af75eb17a00a4d"></a>string</p> 34</td> 35<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_a8d12e4af905d4743a5ec9cd6018d2972"><a name="zh-cn_topic_0000001173324671_a8d12e4af905d4743a5ec9cd6018d2972"></a><a name="zh-cn_topic_0000001173324671_a8d12e4af905d4743a5ec9cd6018d2972"></a>-</p> 36</td> 37<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p42461736102118"><a name="zh-cn_topic_0000001173324671_p42461736102118"></a><a name="zh-cn_topic_0000001173324671_p42461736102118"></a>否</p> 38</td> 39<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_a1a1731af05554f119fa365748f276bb2"><a name="zh-cn_topic_0000001173324671_a1a1731af05554f119fa365748f276bb2"></a><a name="zh-cn_topic_0000001173324671_a1a1731af05554f119fa365748f276bb2"></a>组件的唯一标识。</p> 40</td> 41</tr> 42<tr id="zh-cn_topic_0000001173324671_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_a3cf785e2a2a043268d168f58d59207c8"><a name="zh-cn_topic_0000001173324671_a3cf785e2a2a043268d168f58d59207c8"></a><a name="zh-cn_topic_0000001173324671_a3cf785e2a2a043268d168f58d59207c8"></a>x</p> 43</td> 44<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_aa9b258d23e1e425dbc2ffe8edbc91a42"><a name="zh-cn_topic_0000001173324671_aa9b258d23e1e425dbc2ffe8edbc91a42"></a><a name="zh-cn_topic_0000001173324671_aa9b258d23e1e425dbc2ffe8edbc91a42"></a><length>|<percentage></p> 45</td> 46<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_ac312df4f14444c98955ed055456848a7"><a name="zh-cn_topic_0000001173324671_ac312df4f14444c98955ed055456848a7"></a><a name="zh-cn_topic_0000001173324671_ac312df4f14444c98955ed055456848a7"></a>0</p> 47</td> 48<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p1624612362219"><a name="zh-cn_topic_0000001173324671_p1624612362219"></a><a name="zh-cn_topic_0000001173324671_p1624612362219"></a>否</p> 49</td> 50<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p62121758111517"><a name="zh-cn_topic_0000001173324671_p62121758111517"></a><a name="zh-cn_topic_0000001173324671_p62121758111517"></a>设置组件左上角x轴坐标</p> 51</td> 52</tr> 53<tr id="zh-cn_topic_0000001173324671_row1259531661611"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p1359601671613"><a name="zh-cn_topic_0000001173324671_p1359601671613"></a><a name="zh-cn_topic_0000001173324671_p1359601671613"></a>y</p> 54</td> 55<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p65967163165"><a name="zh-cn_topic_0000001173324671_p65967163165"></a><a name="zh-cn_topic_0000001173324671_p65967163165"></a><length>|<percentage></p> 56</td> 57<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p10596151671610"><a name="zh-cn_topic_0000001173324671_p10596151671610"></a><a name="zh-cn_topic_0000001173324671_p10596151671610"></a>0</p> 58</td> 59<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p1059610169169"><a name="zh-cn_topic_0000001173324671_p1059610169169"></a><a name="zh-cn_topic_0000001173324671_p1059610169169"></a>否</p> 60</td> 61<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p125961416161611"><a name="zh-cn_topic_0000001173324671_p125961416161611"></a><a name="zh-cn_topic_0000001173324671_p125961416161611"></a>设置组件左上角y轴坐标。作为textpath子组件时失效。</p> 62</td> 63</tr> 64<tr id="zh-cn_topic_0000001173324671_row11404114510176"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p11404124541714"><a name="zh-cn_topic_0000001173324671_p11404124541714"></a><a name="zh-cn_topic_0000001173324671_p11404124541714"></a>dx</p> 65</td> 66<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p108919015549"><a name="zh-cn_topic_0000001173324671_p108919015549"></a><a name="zh-cn_topic_0000001173324671_p108919015549"></a><length>|<percentage></p> 67</td> 68<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p20892019541"><a name="zh-cn_topic_0000001173324671_p20892019541"></a><a name="zh-cn_topic_0000001173324671_p20892019541"></a>0</p> 69</td> 70<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p7893010540"><a name="zh-cn_topic_0000001173324671_p7893010540"></a><a name="zh-cn_topic_0000001173324671_p7893010540"></a>否</p> 71</td> 72<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p78950185420"><a name="zh-cn_topic_0000001173324671_p78950185420"></a><a name="zh-cn_topic_0000001173324671_p78950185420"></a>设置文本x轴偏移</p> 73</td> 74</tr> 75<tr id="zh-cn_topic_0000001173324671_row75241175410"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p117241850155416"><a name="zh-cn_topic_0000001173324671_p117241850155416"></a><a name="zh-cn_topic_0000001173324671_p117241850155416"></a>dy</p> 76</td> 77<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p4724125035416"><a name="zh-cn_topic_0000001173324671_p4724125035416"></a><a name="zh-cn_topic_0000001173324671_p4724125035416"></a><length>|<percentage></p> 78</td> 79<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p117241350155416"><a name="zh-cn_topic_0000001173324671_p117241350155416"></a><a name="zh-cn_topic_0000001173324671_p117241350155416"></a>0</p> 80</td> 81<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p4724145065420"><a name="zh-cn_topic_0000001173324671_p4724145065420"></a><a name="zh-cn_topic_0000001173324671_p4724145065420"></a>否</p> 82</td> 83<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p107241750205414"><a name="zh-cn_topic_0000001173324671_p107241750205414"></a><a name="zh-cn_topic_0000001173324671_p107241750205414"></a>设置文本y轴偏移。作为textpath子组件时失效。</p> 84</td> 85</tr> 86<tr id="zh-cn_topic_0000001173324671_row467953643419"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p1546917783314"><a name="zh-cn_topic_0000001173324671_p1546917783314"></a><a name="zh-cn_topic_0000001173324671_p1546917783314"></a>rotate</p> 87</td> 88<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p846910713319"><a name="zh-cn_topic_0000001173324671_p846910713319"></a><a name="zh-cn_topic_0000001173324671_p846910713319"></a>number</p> 89</td> 90<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p14469271337"><a name="zh-cn_topic_0000001173324671_p14469271337"></a><a name="zh-cn_topic_0000001173324671_p14469271337"></a>0</p> 91</td> 92<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p79541222103311"><a name="zh-cn_topic_0000001173324671_p79541222103311"></a><a name="zh-cn_topic_0000001173324671_p79541222103311"></a>否</p> 93</td> 94<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p34692079335"><a name="zh-cn_topic_0000001173324671_p34692079335"></a><a name="zh-cn_topic_0000001173324671_p34692079335"></a>字体以左下角为圆心旋转角度，正数顺时针，负数逆时针</p> 95</td> 96</tr> 97<tr id="zh-cn_topic_0000001173324671_row159241597584"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p333735811012"><a name="zh-cn_topic_0000001173324671_p333735811012"></a><a name="zh-cn_topic_0000001173324671_p333735811012"></a>font-size</p> 98</td> 99<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p23371581702"><a name="zh-cn_topic_0000001173324671_p23371581702"></a><a name="zh-cn_topic_0000001173324671_p23371581702"></a><length></p> 100</td> 101<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p93371258901"><a name="zh-cn_topic_0000001173324671_p93371258901"></a><a name="zh-cn_topic_0000001173324671_p93371258901"></a>30px</p> 102</td> 103<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p43377581013"><a name="zh-cn_topic_0000001173324671_p43377581013"></a><a name="zh-cn_topic_0000001173324671_p43377581013"></a>否</p> 104</td> 105<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p1933715583010"><a name="zh-cn_topic_0000001173324671_p1933715583010"></a><a name="zh-cn_topic_0000001173324671_p1933715583010"></a>设置文本的尺寸。</p> 106</td> 107</tr> 108<tr id="zh-cn_topic_0000001173324671_row18547317594"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p11977553291"><a name="zh-cn_topic_0000001173324671_p11977553291"></a><a name="zh-cn_topic_0000001173324671_p11977553291"></a>fill</p> 109</td> 110<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p297105512910"><a name="zh-cn_topic_0000001173324671_p297105512910"></a><a name="zh-cn_topic_0000001173324671_p297105512910"></a><color></p> 111</td> 112<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p4926816113116"><a name="zh-cn_topic_0000001173324671_p4926816113116"></a><a name="zh-cn_topic_0000001173324671_p4926816113116"></a>black</p> 113</td> 114<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p9987559298"><a name="zh-cn_topic_0000001173324671_p9987559298"></a><a name="zh-cn_topic_0000001173324671_p9987559298"></a>否</p> 115</td> 116<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p1398555152918"><a name="zh-cn_topic_0000001173324671_p1398555152918"></a><a name="zh-cn_topic_0000001173324671_p1398555152918"></a>字体填充颜色</p> 117</td> 118</tr> 119<tr id="zh-cn_topic_0000001173324671_row19916621113316"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_a4a0bae0e1bb946d6bc7bf30e0a535343"><a name="zh-cn_topic_0000001173324671_a4a0bae0e1bb946d6bc7bf30e0a535343"></a><a name="zh-cn_topic_0000001173324671_a4a0bae0e1bb946d6bc7bf30e0a535343"></a>opacity</p> 120</td> 121<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_a2679e4565dbc4370b40d1be831a6148d"><a name="zh-cn_topic_0000001173324671_a2679e4565dbc4370b40d1be831a6148d"></a><a name="zh-cn_topic_0000001173324671_a2679e4565dbc4370b40d1be831a6148d"></a>number</p> 122</td> 123<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_a0b0d56a245e14779a5561f99cd1ce9f6"><a name="zh-cn_topic_0000001173324671_a0b0d56a245e14779a5561f99cd1ce9f6"></a><a name="zh-cn_topic_0000001173324671_a0b0d56a245e14779a5561f99cd1ce9f6"></a>1</p> 124</td> 125<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p324614367213"><a name="zh-cn_topic_0000001173324671_p324614367213"></a><a name="zh-cn_topic_0000001173324671_p324614367213"></a>否</p> 126</td> 127<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_aa0471c31e05e465aa9c42312b9ab9f6f"><a name="zh-cn_topic_0000001173324671_aa0471c31e05e465aa9c42312b9ab9f6f"></a><a name="zh-cn_topic_0000001173324671_aa0471c31e05e465aa9c42312b9ab9f6f"></a>元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。</p> 128</td> 129</tr> 130<tr id="zh-cn_topic_0000001173324671_row146374535911"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p116269843018"><a name="zh-cn_topic_0000001173324671_p116269843018"></a><a name="zh-cn_topic_0000001173324671_p116269843018"></a>fill-opacity</p> 131</td> 132<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p17626489305"><a name="zh-cn_topic_0000001173324671_p17626489305"></a><a name="zh-cn_topic_0000001173324671_p17626489305"></a>number</p> 133</td> 134<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p12626188123013"><a name="zh-cn_topic_0000001173324671_p12626188123013"></a><a name="zh-cn_topic_0000001173324671_p12626188123013"></a>1.0</p> 135</td> 136<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p186261823015"><a name="zh-cn_topic_0000001173324671_p186261823015"></a><a name="zh-cn_topic_0000001173324671_p186261823015"></a>否</p> 137</td> 138<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p96263816305"><a name="zh-cn_topic_0000001173324671_p96263816305"></a><a name="zh-cn_topic_0000001173324671_p96263816305"></a>字体填充透明度</p> 139</td> 140</tr> 141<tr id="zh-cn_topic_0000001173324671_row155411819590"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p271765912321"><a name="zh-cn_topic_0000001173324671_p271765912321"></a><a name="zh-cn_topic_0000001173324671_p271765912321"></a>stroke</p> 142</td> 143<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p628018173316"><a name="zh-cn_topic_0000001173324671_p628018173316"></a><a name="zh-cn_topic_0000001173324671_p628018173316"></a><color></p> 144</td> 145<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p18717185913320"><a name="zh-cn_topic_0000001173324671_p18717185913320"></a><a name="zh-cn_topic_0000001173324671_p18717185913320"></a>black</p> 146</td> 147<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p5718259193217"><a name="zh-cn_topic_0000001173324671_p5718259193217"></a><a name="zh-cn_topic_0000001173324671_p5718259193217"></a>否</p> 148</td> 149<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p127182592324"><a name="zh-cn_topic_0000001173324671_p127182592324"></a><a name="zh-cn_topic_0000001173324671_p127182592324"></a>绘制字体边框并指定颜色</p> 150</td> 151</tr> 152<tr id="zh-cn_topic_0000001173324671_row201508122595"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p884814483338"><a name="zh-cn_topic_0000001173324671_p884814483338"></a><a name="zh-cn_topic_0000001173324671_p884814483338"></a>stroke-width</p> 153</td> 154<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p138488484338"><a name="zh-cn_topic_0000001173324671_p138488484338"></a><a name="zh-cn_topic_0000001173324671_p138488484338"></a>number</p> 155</td> 156<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p1884815488330"><a name="zh-cn_topic_0000001173324671_p1884815488330"></a><a name="zh-cn_topic_0000001173324671_p1884815488330"></a>1px</p> 157</td> 158<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p2084884803314"><a name="zh-cn_topic_0000001173324671_p2084884803314"></a><a name="zh-cn_topic_0000001173324671_p2084884803314"></a>否</p> 159</td> 160<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p178481248133310"><a name="zh-cn_topic_0000001173324671_p178481248133310"></a><a name="zh-cn_topic_0000001173324671_p178481248133310"></a>字体边框宽度</p> 161</td> 162</tr> 163<tr id="zh-cn_topic_0000001173324671_row785415145919"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324671_p242391413411"><a name="zh-cn_topic_0000001173324671_p242391413411"></a><a name="zh-cn_topic_0000001173324671_p242391413411"></a>stroke-opacity</p> 164</td> 165<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324671_p642311142346"><a name="zh-cn_topic_0000001173324671_p642311142346"></a><a name="zh-cn_topic_0000001173324671_p642311142346"></a>number</p> 166</td> 167<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324671_p1982932433411"><a name="zh-cn_topic_0000001173324671_p1982932433411"></a><a name="zh-cn_topic_0000001173324671_p1982932433411"></a>1.0</p> 168</td> 169<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324671_p94238149345"><a name="zh-cn_topic_0000001173324671_p94238149345"></a><a name="zh-cn_topic_0000001173324671_p94238149345"></a>否</p> 170</td> 171<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324671_p15423714173415"><a name="zh-cn_topic_0000001173324671_p15423714173415"></a><a name="zh-cn_topic_0000001173324671_p15423714173415"></a>字体边框透明度</p> 172</td> 173</tr> 174</tbody> 175</table> 176 177## 示例<a name="zh-cn_topic_0000001173324671_section360556124815"></a> 178 179``` 180/* xxx.css */ 181.container { 182 flex-direction: row; 183 justify-content: flex-start; 184 align-items: flex-start; 185 height: 1000px; 186 width: 1080px; 187} 188``` 189 190``` 191<!-- xxx.hml --> 192<div class="container"> 193 <svg > 194 <text x="20" y="500" fill="#D2691E" font-size="20"> 195 zero text. 196 <tspan>first span.</tspan> 197 <tspan fill="red" font-size="35">second span.</tspan> 198 <tspan fill="#D2691E" font-size="40" rotate="10">third span.</tspan> 199 </text> 200 <text x="20" y="550" fill="#D2691E" font-size="20"> 201 <tspan dx="-5" fill-opacity="0.2">first span.</tspan> 202 <tspan dx="5" fill="red" font-size="25" fill-opacity="0.4">second span.</tspan> 203 <tspan dy="-5" fill="#D2691E" font-size="35" rotate="-10" fill-opacity="0.6">third span.</tspan> 204 <tspan fill="#blue" font-size="40" rotate="10" fill-opacity="0.8" stroke="#00FF00" stroke-width="1px">forth span.</tspan> 205 </text> 206 </svg> 207</div> 208``` 209 210 211 212属性动画示例 213 214``` 215/* xxx.css */ 216.container { 217 flex-direction: row; 218 justify-content: flex-start; 219 align-items: flex-start; 220 height: 3000px; 221 width: 1080px; 222} 223``` 224 225``` 226<!-- xxx.hml --> 227<div class="container"> 228 <svg> 229 <text y="300" font-size="30" fill="blue"> 230 <tspan> 231 tspan attribute x|opacity|rotate 232 <animate attributeName="x" from="-100" to="400" dur="3s" repeatCount="indefinite"></animate> 233 <animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 234 <animate attributeName="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animate> 235 </tspan> 236 </text> 237 <text y="350" font-size="30" fill="blue"> 238 <tspan> 239 tspan attribute dx 240 <animate attributeName="dx" from="-100" to="400" dur="3s" repeatCount="indefinite"></animate> 241 </tspan> 242 </text> 243 </svg> 244</div> 245``` 246 247 248 249``` 250<!-- xxx.hml --> 251<div class="container"> 252 <svg> 253 <text> 254 <tspan x="0" y="550" font-size="30"> 255 tspan attribute fill|fill-opacity 256 <animate attributeName="fill" from="blue" to="red" dur="3s" repeatCount="indefinite"></animate> 257 <animate attributeName="fill-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 258 </tspan> 259 </text> 260 </svg> 261</div> 262``` 263 264 265 266``` 267<!-- xxx.hml --> 268<div class="container"> 269 <svg> 270 <text> 271 <tspan x="20" y="600" fill="red"> 272 tspan attribute font-size 273 <animate attributeName="font-size" from="10" to="50" dur="3s" repeatCount="indefinite"></animate> 274 </tspan> 275 </text> 276 </svg> 277</div> 278``` 279 280 281 282``` 283<!-- xxx.hml --> 284<div class="container"> 285 <svg> 286 <text> 287 <tspan x="20" y="650" font-size="25" fill="blue" stroke="red"> 288 tspan attribute stroke 289 <animate attributeName="stroke" from="red" to="#00FF00" dur="3s" repeatCount="indefinite"></animate> 290 </tspan> 291 </text> 292 <text> 293 <tspan x="300" y="650" font-size="25" fill="white" stroke="red"> 294 tspan attribute stroke-width-opacity 295 <animate attributeName="stroke-width" from="1" to="5" dur="3s" repeatCount="indefinite"></animate> 296 <animate attributeName="stroke-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 297 </tspan> 298 </text> 299 </svg> 300</div> 301``` 302 303 304 305
