1# text<a name="ZH-CN_TOPIC_0000001164577156"></a> 2 3文本，用于呈现一段信息。 4 5> **说明：** 6>- 从API Version 7 开始支持。 7>- 文本的展示内容需要写在元素标签内，可嵌套tspan子元素标签分段，可嵌套textPath子元素标签按指定路径绘制。 8>- 只支持被父元素标签svg嵌套。 9>- 只支持默认字体sans-serif 10 11## 权限列表<a name="zh-cn_topic_0000001173164689_section11257113618419"></a> 12 13无 14 15## 子组件<a name="zh-cn_topic_0000001173164689_section9288143101012"></a> 16 17支持tspan、textpath、animate、animateTransform。 18 19## 属性<a name="zh-cn_topic_0000001173164689_section2907183951110"></a> 20 21支持以下表格中的属性。 22 23<a name="zh-cn_topic_0000001173164689_table20633101642315"></a> 24<table><thead align="left"><tr id="zh-cn_topic_0000001173164689_row663331618238"><th class="cellrowborder" valign="top" width="16.84%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173164689_aaf1247770b244944bbcc9f28d9a6f00b"><a name="zh-cn_topic_0000001173164689_aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="zh-cn_topic_0000001173164689_aaf1247770b244944bbcc9f28d9a6f00b"></a>名称</p> 25</th> 26<th class="cellrowborder" valign="top" width="29.4%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173164689_a6efc3502761f4faf9630e484280f75b6"><a name="zh-cn_topic_0000001173164689_a6efc3502761f4faf9630e484280f75b6"></a><a name="zh-cn_topic_0000001173164689_a6efc3502761f4faf9630e484280f75b6"></a>类型</p> 27</th> 28<th class="cellrowborder" valign="top" width="10.4%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173164689_a27a37273d9ad47569ddbcb8db985d302"><a name="zh-cn_topic_0000001173164689_a27a37273d9ad47569ddbcb8db985d302"></a><a name="zh-cn_topic_0000001173164689_a27a37273d9ad47569ddbcb8db985d302"></a>默认值</p> 29</th> 30<th class="cellrowborder" valign="top" width="7.6%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173164689_p824610360217"><a name="zh-cn_topic_0000001173164689_p824610360217"></a><a name="zh-cn_topic_0000001173164689_p824610360217"></a>必填</p> 31</th> 32<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173164689_a2ff3361bfd3b420ba4967452d2ddd098"><a name="zh-cn_topic_0000001173164689_a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="zh-cn_topic_0000001173164689_a2ff3361bfd3b420ba4967452d2ddd098"></a>描述</p> 33</th> 34</tr> 35</thead> 36<tbody><tr id="zh-cn_topic_0000001173164689_row36332165231"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_a83b6dd280109466fb015e64de1ef4df3"><a name="zh-cn_topic_0000001173164689_a83b6dd280109466fb015e64de1ef4df3"></a><a name="zh-cn_topic_0000001173164689_a83b6dd280109466fb015e64de1ef4df3"></a>id</p> 37</td> 38<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_abc38fa2b85854bc687af75eb17a00a4d"><a name="zh-cn_topic_0000001173164689_abc38fa2b85854bc687af75eb17a00a4d"></a><a name="zh-cn_topic_0000001173164689_abc38fa2b85854bc687af75eb17a00a4d"></a>string</p> 39</td> 40<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_a8d12e4af905d4743a5ec9cd6018d2972"><a name="zh-cn_topic_0000001173164689_a8d12e4af905d4743a5ec9cd6018d2972"></a><a name="zh-cn_topic_0000001173164689_a8d12e4af905d4743a5ec9cd6018d2972"></a>-</p> 41</td> 42<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p42461736102118"><a name="zh-cn_topic_0000001173164689_p42461736102118"></a><a name="zh-cn_topic_0000001173164689_p42461736102118"></a>否</p> 43</td> 44<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_a1a1731af05554f119fa365748f276bb2"><a name="zh-cn_topic_0000001173164689_a1a1731af05554f119fa365748f276bb2"></a><a name="zh-cn_topic_0000001173164689_a1a1731af05554f119fa365748f276bb2"></a>组件的唯一标识。</p> 45</td> 46</tr> 47<tr id="zh-cn_topic_0000001173164689_row1634171618236"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_a3cf785e2a2a043268d168f58d59207c8"><a name="zh-cn_topic_0000001173164689_a3cf785e2a2a043268d168f58d59207c8"></a><a name="zh-cn_topic_0000001173164689_a3cf785e2a2a043268d168f58d59207c8"></a>x</p> 48</td> 49<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_aa9b258d23e1e425dbc2ffe8edbc91a42"><a name="zh-cn_topic_0000001173164689_aa9b258d23e1e425dbc2ffe8edbc91a42"></a><a name="zh-cn_topic_0000001173164689_aa9b258d23e1e425dbc2ffe8edbc91a42"></a><length>|<percentage></p> 50</td> 51<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_ac312df4f14444c98955ed055456848a7"><a name="zh-cn_topic_0000001173164689_ac312df4f14444c98955ed055456848a7"></a><a name="zh-cn_topic_0000001173164689_ac312df4f14444c98955ed055456848a7"></a>0</p> 52</td> 53<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p1624612362219"><a name="zh-cn_topic_0000001173164689_p1624612362219"></a><a name="zh-cn_topic_0000001173164689_p1624612362219"></a>否</p> 54</td> 55<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p62121758111517"><a name="zh-cn_topic_0000001173164689_p62121758111517"></a><a name="zh-cn_topic_0000001173164689_p62121758111517"></a>设置组件左上角x轴坐标</p> 56</td> 57</tr> 58<tr id="zh-cn_topic_0000001173164689_row1259531661611"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p1359601671613"><a name="zh-cn_topic_0000001173164689_p1359601671613"></a><a name="zh-cn_topic_0000001173164689_p1359601671613"></a>y</p> 59</td> 60<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p65967163165"><a name="zh-cn_topic_0000001173164689_p65967163165"></a><a name="zh-cn_topic_0000001173164689_p65967163165"></a><length>|<percentage></p> 61</td> 62<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p10596151671610"><a name="zh-cn_topic_0000001173164689_p10596151671610"></a><a name="zh-cn_topic_0000001173164689_p10596151671610"></a>0</p> 63</td> 64<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p1059610169169"><a name="zh-cn_topic_0000001173164689_p1059610169169"></a><a name="zh-cn_topic_0000001173164689_p1059610169169"></a>否</p> 65</td> 66<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p125961416161611"><a name="zh-cn_topic_0000001173164689_p125961416161611"></a><a name="zh-cn_topic_0000001173164689_p125961416161611"></a>设置组件左上角y轴坐标</p> 67</td> 68</tr> 69<tr id="zh-cn_topic_0000001173164689_row11404114510176"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p11404124541714"><a name="zh-cn_topic_0000001173164689_p11404124541714"></a><a name="zh-cn_topic_0000001173164689_p11404124541714"></a>dx</p> 70</td> 71<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p108919015549"><a name="zh-cn_topic_0000001173164689_p108919015549"></a><a name="zh-cn_topic_0000001173164689_p108919015549"></a><length>|<percentage></p> 72</td> 73<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p20892019541"><a name="zh-cn_topic_0000001173164689_p20892019541"></a><a name="zh-cn_topic_0000001173164689_p20892019541"></a>0</p> 74</td> 75<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p7893010540"><a name="zh-cn_topic_0000001173164689_p7893010540"></a><a name="zh-cn_topic_0000001173164689_p7893010540"></a>否</p> 76</td> 77<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p78950185420"><a name="zh-cn_topic_0000001173164689_p78950185420"></a><a name="zh-cn_topic_0000001173164689_p78950185420"></a>设置文本x轴偏移</p> 78</td> 79</tr> 80<tr id="zh-cn_topic_0000001173164689_row75241175410"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p117241850155416"><a name="zh-cn_topic_0000001173164689_p117241850155416"></a><a name="zh-cn_topic_0000001173164689_p117241850155416"></a>dy</p> 81</td> 82<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p4724125035416"><a name="zh-cn_topic_0000001173164689_p4724125035416"></a><a name="zh-cn_topic_0000001173164689_p4724125035416"></a><length>|<percentage></p> 83</td> 84<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p117241350155416"><a name="zh-cn_topic_0000001173164689_p117241350155416"></a><a name="zh-cn_topic_0000001173164689_p117241350155416"></a>0</p> 85</td> 86<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p4724145065420"><a name="zh-cn_topic_0000001173164689_p4724145065420"></a><a name="zh-cn_topic_0000001173164689_p4724145065420"></a>否</p> 87</td> 88<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p107241750205414"><a name="zh-cn_topic_0000001173164689_p107241750205414"></a><a name="zh-cn_topic_0000001173164689_p107241750205414"></a>设置文本y轴偏移</p> 89</td> 90</tr> 91<tr id="zh-cn_topic_0000001173164689_row346915743314"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p1546917783314"><a name="zh-cn_topic_0000001173164689_p1546917783314"></a><a name="zh-cn_topic_0000001173164689_p1546917783314"></a>rotate</p> 92</td> 93<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p846910713319"><a name="zh-cn_topic_0000001173164689_p846910713319"></a><a name="zh-cn_topic_0000001173164689_p846910713319"></a>number</p> 94</td> 95<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p14469271337"><a name="zh-cn_topic_0000001173164689_p14469271337"></a><a name="zh-cn_topic_0000001173164689_p14469271337"></a>0</p> 96</td> 97<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p79541222103311"><a name="zh-cn_topic_0000001173164689_p79541222103311"></a><a name="zh-cn_topic_0000001173164689_p79541222103311"></a>否</p> 98</td> 99<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p34692079335"><a name="zh-cn_topic_0000001173164689_p34692079335"></a><a name="zh-cn_topic_0000001173164689_p34692079335"></a>字体以左下角为圆心旋转角度，正数顺时针，负数逆时针</p> 100</td> 101</tr> 102<tr id="zh-cn_topic_0000001173164689_row19322182910543"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p150223885411"><a name="zh-cn_topic_0000001173164689_p150223885411"></a><a name="zh-cn_topic_0000001173164689_p150223885411"></a>font-size</p> 103</td> 104<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p3502113811542"><a name="zh-cn_topic_0000001173164689_p3502113811542"></a><a name="zh-cn_topic_0000001173164689_p3502113811542"></a><length></p> 105</td> 106<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p16502238125414"><a name="zh-cn_topic_0000001173164689_p16502238125414"></a><a name="zh-cn_topic_0000001173164689_p16502238125414"></a>30px</p> 107</td> 108<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p1250273816549"><a name="zh-cn_topic_0000001173164689_p1250273816549"></a><a name="zh-cn_topic_0000001173164689_p1250273816549"></a>否</p> 109</td> 110<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p10502203815413"><a name="zh-cn_topic_0000001173164689_p10502203815413"></a><a name="zh-cn_topic_0000001173164689_p10502203815413"></a>设置文本的尺寸。</p> 111</td> 112</tr> 113<tr id="zh-cn_topic_0000001173164689_row19645239145513"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p1254235895511"><a name="zh-cn_topic_0000001173164689_p1254235895511"></a><a name="zh-cn_topic_0000001173164689_p1254235895511"></a>fill</p> 114</td> 115<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p17542115815553"><a name="zh-cn_topic_0000001173164689_p17542115815553"></a><a name="zh-cn_topic_0000001173164689_p17542115815553"></a><color></p> 116</td> 117<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p5542135835517"><a name="zh-cn_topic_0000001173164689_p5542135835517"></a><a name="zh-cn_topic_0000001173164689_p5542135835517"></a>black</p> 118</td> 119<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p65421458105510"><a name="zh-cn_topic_0000001173164689_p65421458105510"></a><a name="zh-cn_topic_0000001173164689_p65421458105510"></a>否</p> 120</td> 121<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p354275835511"><a name="zh-cn_topic_0000001173164689_p354275835511"></a><a name="zh-cn_topic_0000001173164689_p354275835511"></a>字体填充颜色</p> 122</td> 123</tr> 124<tr id="zh-cn_topic_0000001173164689_row94649463555"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p1254217581557"><a name="zh-cn_topic_0000001173164689_p1254217581557"></a><a name="zh-cn_topic_0000001173164689_p1254217581557"></a>fill-opacity</p> 125</td> 126<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p1754215875514"><a name="zh-cn_topic_0000001173164689_p1754215875514"></a><a name="zh-cn_topic_0000001173164689_p1754215875514"></a>number</p> 127</td> 128<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p15542115814558"><a name="zh-cn_topic_0000001173164689_p15542115814558"></a><a name="zh-cn_topic_0000001173164689_p15542115814558"></a>1.0</p> 129</td> 130<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p115433589554"><a name="zh-cn_topic_0000001173164689_p115433589554"></a><a name="zh-cn_topic_0000001173164689_p115433589554"></a>否</p> 131</td> 132<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p19543058195511"><a name="zh-cn_topic_0000001173164689_p19543058195511"></a><a name="zh-cn_topic_0000001173164689_p19543058195511"></a>字体填充透明度</p> 133</td> 134</tr> 135<tr id="zh-cn_topic_0000001173164689_row14858838113210"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_a4a0bae0e1bb946d6bc7bf30e0a535343"><a name="zh-cn_topic_0000001173164689_a4a0bae0e1bb946d6bc7bf30e0a535343"></a><a name="zh-cn_topic_0000001173164689_a4a0bae0e1bb946d6bc7bf30e0a535343"></a>opacity</p> 136</td> 137<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_a2679e4565dbc4370b40d1be831a6148d"><a name="zh-cn_topic_0000001173164689_a2679e4565dbc4370b40d1be831a6148d"></a><a name="zh-cn_topic_0000001173164689_a2679e4565dbc4370b40d1be831a6148d"></a>number</p> 138</td> 139<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_a0b0d56a245e14779a5561f99cd1ce9f6"><a name="zh-cn_topic_0000001173164689_a0b0d56a245e14779a5561f99cd1ce9f6"></a><a name="zh-cn_topic_0000001173164689_a0b0d56a245e14779a5561f99cd1ce9f6"></a>1</p> 140</td> 141<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p324614367213"><a name="zh-cn_topic_0000001173164689_p324614367213"></a><a name="zh-cn_topic_0000001173164689_p324614367213"></a>否</p> 142</td> 143<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_aa0471c31e05e465aa9c42312b9ab9f6f"><a name="zh-cn_topic_0000001173164689_aa0471c31e05e465aa9c42312b9ab9f6f"></a><a name="zh-cn_topic_0000001173164689_aa0471c31e05e465aa9c42312b9ab9f6f"></a>元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。</p> 144</td> 145</tr> 146<tr id="zh-cn_topic_0000001173164689_row55924498556"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p17543185895520"><a name="zh-cn_topic_0000001173164689_p17543185895520"></a><a name="zh-cn_topic_0000001173164689_p17543185895520"></a>stroke</p> 147</td> 148<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p195431258175515"><a name="zh-cn_topic_0000001173164689_p195431258175515"></a><a name="zh-cn_topic_0000001173164689_p195431258175515"></a><color></p> 149</td> 150<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p18543658205512"><a name="zh-cn_topic_0000001173164689_p18543658205512"></a><a name="zh-cn_topic_0000001173164689_p18543658205512"></a>black</p> 151</td> 152<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p16543165855517"><a name="zh-cn_topic_0000001173164689_p16543165855517"></a><a name="zh-cn_topic_0000001173164689_p16543165855517"></a>否</p> 153</td> 154<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p1543145845514"><a name="zh-cn_topic_0000001173164689_p1543145845514"></a><a name="zh-cn_topic_0000001173164689_p1543145845514"></a>绘制字体边框并指定颜色</p> 155</td> 156</tr> 157<tr id="zh-cn_topic_0000001173164689_row175295385512"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p16543115835516"><a name="zh-cn_topic_0000001173164689_p16543115835516"></a><a name="zh-cn_topic_0000001173164689_p16543115835516"></a>stroke-width</p> 158</td> 159<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p15543958165515"><a name="zh-cn_topic_0000001173164689_p15543958165515"></a><a name="zh-cn_topic_0000001173164689_p15543958165515"></a>number</p> 160</td> 161<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p654416580553"><a name="zh-cn_topic_0000001173164689_p654416580553"></a><a name="zh-cn_topic_0000001173164689_p654416580553"></a>1px</p> 162</td> 163<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p25440586552"><a name="zh-cn_topic_0000001173164689_p25440586552"></a><a name="zh-cn_topic_0000001173164689_p25440586552"></a>否</p> 164</td> 165<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p1954415895512"><a name="zh-cn_topic_0000001173164689_p1954415895512"></a><a name="zh-cn_topic_0000001173164689_p1954415895512"></a>字体边框宽度</p> 166</td> 167</tr> 168<tr id="zh-cn_topic_0000001173164689_row192241431553"><td class="cellrowborder" valign="top" width="16.84%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164689_p454412587553"><a name="zh-cn_topic_0000001173164689_p454412587553"></a><a name="zh-cn_topic_0000001173164689_p454412587553"></a>stroke-opacity</p> 169</td> 170<td class="cellrowborder" valign="top" width="29.4%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164689_p3544358195516"><a name="zh-cn_topic_0000001173164689_p3544358195516"></a><a name="zh-cn_topic_0000001173164689_p3544358195516"></a>number</p> 171</td> 172<td class="cellrowborder" valign="top" width="10.4%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164689_p7544165855514"><a name="zh-cn_topic_0000001173164689_p7544165855514"></a><a name="zh-cn_topic_0000001173164689_p7544165855514"></a>1.0</p> 173</td> 174<td class="cellrowborder" valign="top" width="7.6%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164689_p13544258195517"><a name="zh-cn_topic_0000001173164689_p13544258195517"></a><a name="zh-cn_topic_0000001173164689_p13544258195517"></a>否</p> 175</td> 176<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164689_p14544185816559"><a name="zh-cn_topic_0000001173164689_p14544185816559"></a><a name="zh-cn_topic_0000001173164689_p14544185816559"></a>字体边框透明度</p> 177</td> 178</tr> 179</tbody> 180</table> 181 182## 示例<a name="zh-cn_topic_0000001173164689_section360556124815"></a> 183 184``` 185<!-- xxx.css--> 186.container { 187 flex-direction: row; 188 justify-content: flex-start; 189 align-items: flex-start; 190 height: 1000px; 191 width: 1080px; 192} 193``` 194 195``` 196<!-- xxx.hml --> 197<div class="container"> 198 <svg> 199 <text x="20px" y="0px" font-size="30" fill="blue">test x|y</text> 200 <text x="150" y="15" font-size="30" fill="blue">test x|y</text> 201 <text x="300" y="30" font-size="30" fill="blue" opacity="0.1">test opacity</text> 202 <text dx="20" y="30" dy="50" fill="blue" font-size="30">test dx|dy|fill|font-size</text> 203 <text x="20" y="150" fill="blue" font-size="30" fill-opacity="0.2">test fill-opacity</text> 204 <text x="20" y="200" fill="red" font-size="40">test 0123456789</text> 205 <text x="20" y="250" fill="red" font-size="40" fill-opacity="0.2">test 中文</text> 206 <text x="20" y="300" rotate="30" fill="red" font-size="40">test rotate</text> 207 <text x="20" y="350" fill="blue" font-size="40" stroke="red" stroke-width="2">test stroke</text> 208 <text x="20" y="400" fill="white" font-size="40" stroke="red" stroke-width="2" stroke-opacity="0.5">test stroke-opacity</text> 209 </svg> 210</div> 211``` 212 213**图 1** <a name="zh-cn_topic_0000001173164689_fig32245519597"></a> 214 215 216属性动画示例 217 218``` 219/* xxx.css */ 220.container { 221 flex-direction: row; 222 justify-content: flex-start; 223 align-items: flex-start; 224 height: 3000px; 225 width: 1080px; 226} 227``` 228 229``` 230<!-- xxx.hml --> 231<div class="container"> 232 <svg> 233 <text y="50" font-size="30" fill="blue"> 234 text attribute x|opacity|rotate 235 <animate attributeName="x" from="100" by="400" dur="3s" repeatCount="indefinite"></animate> 236 <animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 237 <animate attributeName="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animate> 238 </text> 239 </svg> 240</div> 241``` 242 243 244 245``` 246<!-- xxx.hml --> 247<div class="container"> 248 <svg> 249 <text x="20" y="200" fill="blue"> 250 text attribute font-size 251 <animate attributeName="font-size" from="10" to="50" dur="3s" repeatCount="indefinite"></animate> 252 </text> 253 </svg> 254</div> 255``` 256 257 258 259``` 260<!-- xxx.hml --> 261<div class="container"> 262 <svg> 263 <text x="20" y="250" font-size="25" fill="blue" stroke="red"> 264 text attribute stroke 265 <animate attributeName="stroke" from="red" to="#00FF00" dur="3s" repeatCount="indefinite"></animate> 266 </text> 267 <text x="300" y="250" font-size="25" fill="white" stroke="red"> 268 text attribute stroke-width-opacity 269 <animate attributeName="stroke-width" from="1" to="5" dur="3s" repeatCount="indefinite"></animate> 270 <animate attributeName="stroke-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 271 </text> 272 </svg> 273</div> 274``` 275 276 277 278
