1# textPath<a name="ZH-CN_TOPIC_0000001164417164"></a> 2 3沿路径绘制文本。 4 5> **说明：** 6>- 从API Version 7 开始支持。 7>- 按指定的路径绘制文本，可嵌套子标签tspan分段。 8>- 只支持被父元素标签text嵌套。 9 10## 权限列表<a name="zh-cn_topic_0000001127284818_section11257113618419"></a> 11 12无 13 14## 子组件<a name="zh-cn_topic_0000001127284818_section9288143101012"></a> 15 16tspan。 17 18## 属性<a name="zh-cn_topic_0000001127284818_section2907183951110"></a> 19 20支持以下表格中的属性。 21 22<a name="zh-cn_topic_0000001127284818_table20633101642315"></a> 23<table><thead align="left"><tr id="zh-cn_topic_0000001127284818_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127284818_aaf1247770b244944bbcc9f28d9a6f00b"><a name="zh-cn_topic_0000001127284818_aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="zh-cn_topic_0000001127284818_aaf1247770b244944bbcc9f28d9a6f00b"></a>名称</p> 24</th> 25<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127284818_a6efc3502761f4faf9630e484280f75b6"><a name="zh-cn_topic_0000001127284818_a6efc3502761f4faf9630e484280f75b6"></a><a name="zh-cn_topic_0000001127284818_a6efc3502761f4faf9630e484280f75b6"></a>类型</p> 26</th> 27<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127284818_a27a37273d9ad47569ddbcb8db985d302"><a name="zh-cn_topic_0000001127284818_a27a37273d9ad47569ddbcb8db985d302"></a><a name="zh-cn_topic_0000001127284818_a27a37273d9ad47569ddbcb8db985d302"></a>默认值</p> 28</th> 29<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127284818_p824610360217"><a name="zh-cn_topic_0000001127284818_p824610360217"></a><a name="zh-cn_topic_0000001127284818_p824610360217"></a>必填</p> 30</th> 31<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127284818_a2ff3361bfd3b420ba4967452d2ddd098"><a name="zh-cn_topic_0000001127284818_a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="zh-cn_topic_0000001127284818_a2ff3361bfd3b420ba4967452d2ddd098"></a>描述</p> 32</th> 33</tr> 34</thead> 35<tbody><tr id="zh-cn_topic_0000001127284818_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_a83b6dd280109466fb015e64de1ef4df3"><a name="zh-cn_topic_0000001127284818_a83b6dd280109466fb015e64de1ef4df3"></a><a name="zh-cn_topic_0000001127284818_a83b6dd280109466fb015e64de1ef4df3"></a>id</p> 36</td> 37<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_abc38fa2b85854bc687af75eb17a00a4d"><a name="zh-cn_topic_0000001127284818_abc38fa2b85854bc687af75eb17a00a4d"></a><a name="zh-cn_topic_0000001127284818_abc38fa2b85854bc687af75eb17a00a4d"></a>string</p> 38</td> 39<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_a8d12e4af905d4743a5ec9cd6018d2972"><a name="zh-cn_topic_0000001127284818_a8d12e4af905d4743a5ec9cd6018d2972"></a><a name="zh-cn_topic_0000001127284818_a8d12e4af905d4743a5ec9cd6018d2972"></a>-</p> 40</td> 41<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p42461736102118"><a name="zh-cn_topic_0000001127284818_p42461736102118"></a><a name="zh-cn_topic_0000001127284818_p42461736102118"></a>否</p> 42</td> 43<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_a1a1731af05554f119fa365748f276bb2"><a name="zh-cn_topic_0000001127284818_a1a1731af05554f119fa365748f276bb2"></a><a name="zh-cn_topic_0000001127284818_a1a1731af05554f119fa365748f276bb2"></a>组件的唯一标识。</p> 44</td> 45</tr> 46<tr id="zh-cn_topic_0000001127284818_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_a3cf785e2a2a043268d168f58d59207c8"><a name="zh-cn_topic_0000001127284818_a3cf785e2a2a043268d168f58d59207c8"></a><a name="zh-cn_topic_0000001127284818_a3cf785e2a2a043268d168f58d59207c8"></a>path</p> 47</td> 48<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_aa9b258d23e1e425dbc2ffe8edbc91a42"><a name="zh-cn_topic_0000001127284818_aa9b258d23e1e425dbc2ffe8edbc91a42"></a><a name="zh-cn_topic_0000001127284818_aa9b258d23e1e425dbc2ffe8edbc91a42"></a>string</p> 49</td> 50<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_ac312df4f14444c98955ed055456848a7"><a name="zh-cn_topic_0000001127284818_ac312df4f14444c98955ed055456848a7"></a><a name="zh-cn_topic_0000001127284818_ac312df4f14444c98955ed055456848a7"></a>0</p> 51</td> 52<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p1624612362219"><a name="zh-cn_topic_0000001127284818_p1624612362219"></a><a name="zh-cn_topic_0000001127284818_p1624612362219"></a>是</p> 53</td> 54<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_adbe7ecbee96b4f938b04a4b8d62791bf"><a name="zh-cn_topic_0000001127284818_adbe7ecbee96b4f938b04a4b8d62791bf"></a><a name="zh-cn_topic_0000001127284818_adbe7ecbee96b4f938b04a4b8d62791bf"></a>设置路径的形状。</p> 55<p id="zh-cn_topic_0000001127284818_p46751932620"><a name="zh-cn_topic_0000001127284818_p46751932620"></a><a name="zh-cn_topic_0000001127284818_p46751932620"></a>字母指令表示的意义如下：</p> 56<a name="zh-cn_topic_0000001127284818_ul146753321226"></a><a name="zh-cn_topic_0000001127284818_ul146753321226"></a><ul id="zh-cn_topic_0000001127284818_ul146753321226"><li>M = moveto</li><li>L = lineto</li><li>H = horizontal lineto</li><li>V = vertical lineto</li><li>C = curveto</li><li>S = smooth curveto</li><li>Q = quadratic Belzier curve</li><li>T = smooth quadratic Belzier curveto</li><li>A = elliptical Arc</li><li>Z = closepath</li></ul> 57</td> 58</tr> 59<tr id="zh-cn_topic_0000001127284818_row1259531661611"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_p1359601671613"><a name="zh-cn_topic_0000001127284818_p1359601671613"></a><a name="zh-cn_topic_0000001127284818_p1359601671613"></a>startOffset</p> 60</td> 61<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_p65967163165"><a name="zh-cn_topic_0000001127284818_p65967163165"></a><a name="zh-cn_topic_0000001127284818_p65967163165"></a><length>|<percentage></p> 62</td> 63<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_p10596151671610"><a name="zh-cn_topic_0000001127284818_p10596151671610"></a><a name="zh-cn_topic_0000001127284818_p10596151671610"></a>0</p> 64</td> 65<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p1059610169169"><a name="zh-cn_topic_0000001127284818_p1059610169169"></a><a name="zh-cn_topic_0000001127284818_p1059610169169"></a>否</p> 66</td> 67<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_p125961416161611"><a name="zh-cn_topic_0000001127284818_p125961416161611"></a><a name="zh-cn_topic_0000001127284818_p125961416161611"></a>设置文本沿path绘制的起始偏移。</p> 68</td> 69</tr> 70<tr id="zh-cn_topic_0000001127284818_row1539273652316"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_p136018399235"><a name="zh-cn_topic_0000001127284818_p136018399235"></a><a name="zh-cn_topic_0000001127284818_p136018399235"></a>font-size</p> 71</td> 72<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_p2360123910236"><a name="zh-cn_topic_0000001127284818_p2360123910236"></a><a name="zh-cn_topic_0000001127284818_p2360123910236"></a><length></p> 73</td> 74<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_p1536023952313"><a name="zh-cn_topic_0000001127284818_p1536023952313"></a><a name="zh-cn_topic_0000001127284818_p1536023952313"></a>30px</p> 75</td> 76<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p123607393234"><a name="zh-cn_topic_0000001127284818_p123607393234"></a><a name="zh-cn_topic_0000001127284818_p123607393234"></a>否</p> 77</td> 78<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_p1736083914232"><a name="zh-cn_topic_0000001127284818_p1736083914232"></a><a name="zh-cn_topic_0000001127284818_p1736083914232"></a>设置文本的尺寸。</p> 79</td> 80</tr> 81<tr id="zh-cn_topic_0000001127284818_row1530844982318"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_p1161816329244"><a name="zh-cn_topic_0000001127284818_p1161816329244"></a><a name="zh-cn_topic_0000001127284818_p1161816329244"></a>fill</p> 82</td> 83<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_p46187324247"><a name="zh-cn_topic_0000001127284818_p46187324247"></a><a name="zh-cn_topic_0000001127284818_p46187324247"></a><color></p> 84</td> 85<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_p19618123262419"><a name="zh-cn_topic_0000001127284818_p19618123262419"></a><a name="zh-cn_topic_0000001127284818_p19618123262419"></a>black</p> 86</td> 87<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p861833282418"><a name="zh-cn_topic_0000001127284818_p861833282418"></a><a name="zh-cn_topic_0000001127284818_p861833282418"></a>否</p> 88</td> 89<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_p1661813321247"><a name="zh-cn_topic_0000001127284818_p1661813321247"></a><a name="zh-cn_topic_0000001127284818_p1661813321247"></a>字体填充颜色</p> 90</td> 91</tr> 92<tr id="zh-cn_topic_0000001127284818_row818611518331"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_a4a0bae0e1bb946d6bc7bf30e0a535343"><a name="zh-cn_topic_0000001127284818_a4a0bae0e1bb946d6bc7bf30e0a535343"></a><a name="zh-cn_topic_0000001127284818_a4a0bae0e1bb946d6bc7bf30e0a535343"></a>opacity</p> 93</td> 94<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_a2679e4565dbc4370b40d1be831a6148d"><a name="zh-cn_topic_0000001127284818_a2679e4565dbc4370b40d1be831a6148d"></a><a name="zh-cn_topic_0000001127284818_a2679e4565dbc4370b40d1be831a6148d"></a>number</p> 95</td> 96<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_a0b0d56a245e14779a5561f99cd1ce9f6"><a name="zh-cn_topic_0000001127284818_a0b0d56a245e14779a5561f99cd1ce9f6"></a><a name="zh-cn_topic_0000001127284818_a0b0d56a245e14779a5561f99cd1ce9f6"></a>1</p> 97</td> 98<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p324614367213"><a name="zh-cn_topic_0000001127284818_p324614367213"></a><a name="zh-cn_topic_0000001127284818_p324614367213"></a>否</p> 99</td> 100<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_aa0471c31e05e465aa9c42312b9ab9f6f"><a name="zh-cn_topic_0000001127284818_aa0471c31e05e465aa9c42312b9ab9f6f"></a><a name="zh-cn_topic_0000001127284818_aa0471c31e05e465aa9c42312b9ab9f6f"></a>元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。</p> 101</td> 102</tr> 103<tr id="zh-cn_topic_0000001127284818_row2924118202412"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_p196181832182412"><a name="zh-cn_topic_0000001127284818_p196181832182412"></a><a name="zh-cn_topic_0000001127284818_p196181832182412"></a>fill-opacity</p> 104</td> 105<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_p86181832172411"><a name="zh-cn_topic_0000001127284818_p86181832172411"></a><a name="zh-cn_topic_0000001127284818_p86181832172411"></a>number</p> 106</td> 107<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_p196181432132411"><a name="zh-cn_topic_0000001127284818_p196181432132411"></a><a name="zh-cn_topic_0000001127284818_p196181432132411"></a>1.0</p> 108</td> 109<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p11618632132414"><a name="zh-cn_topic_0000001127284818_p11618632132414"></a><a name="zh-cn_topic_0000001127284818_p11618632132414"></a>否</p> 110</td> 111<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_p8618113232414"><a name="zh-cn_topic_0000001127284818_p8618113232414"></a><a name="zh-cn_topic_0000001127284818_p8618113232414"></a>字体填充透明度</p> 112</td> 113</tr> 114<tr id="zh-cn_topic_0000001127284818_row2173171232411"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_p10618143213244"><a name="zh-cn_topic_0000001127284818_p10618143213244"></a><a name="zh-cn_topic_0000001127284818_p10618143213244"></a>stroke</p> 115</td> 116<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_p8618432172410"><a name="zh-cn_topic_0000001127284818_p8618432172410"></a><a name="zh-cn_topic_0000001127284818_p8618432172410"></a><color></p> 117</td> 118<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_p11618113218244"><a name="zh-cn_topic_0000001127284818_p11618113218244"></a><a name="zh-cn_topic_0000001127284818_p11618113218244"></a>black</p> 119</td> 120<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p17618143212415"><a name="zh-cn_topic_0000001127284818_p17618143212415"></a><a name="zh-cn_topic_0000001127284818_p17618143212415"></a>否</p> 121</td> 122<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_p11619183202419"><a name="zh-cn_topic_0000001127284818_p11619183202419"></a><a name="zh-cn_topic_0000001127284818_p11619183202419"></a>绘制字体边框并指定颜色</p> 123</td> 124</tr> 125<tr id="zh-cn_topic_0000001127284818_row2291916102415"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_p206197323248"><a name="zh-cn_topic_0000001127284818_p206197323248"></a><a name="zh-cn_topic_0000001127284818_p206197323248"></a>stroke-width</p> 126</td> 127<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_p46191932112412"><a name="zh-cn_topic_0000001127284818_p46191932112412"></a><a name="zh-cn_topic_0000001127284818_p46191932112412"></a>number</p> 128</td> 129<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_p18619632182413"><a name="zh-cn_topic_0000001127284818_p18619632182413"></a><a name="zh-cn_topic_0000001127284818_p18619632182413"></a>1px</p> 130</td> 131<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p126191432162418"><a name="zh-cn_topic_0000001127284818_p126191432162418"></a><a name="zh-cn_topic_0000001127284818_p126191432162418"></a>否</p> 132</td> 133<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_p1061943252417"><a name="zh-cn_topic_0000001127284818_p1061943252417"></a><a name="zh-cn_topic_0000001127284818_p1061943252417"></a>字体边框宽度</p> 134</td> 135</tr> 136<tr id="zh-cn_topic_0000001127284818_row20141131962416"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284818_p11619173282415"><a name="zh-cn_topic_0000001127284818_p11619173282415"></a><a name="zh-cn_topic_0000001127284818_p11619173282415"></a>stroke-opacity</p> 137</td> 138<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284818_p761918327249"><a name="zh-cn_topic_0000001127284818_p761918327249"></a><a name="zh-cn_topic_0000001127284818_p761918327249"></a>number</p> 139</td> 140<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284818_p8619193222410"><a name="zh-cn_topic_0000001127284818_p8619193222410"></a><a name="zh-cn_topic_0000001127284818_p8619193222410"></a>1.0</p> 141</td> 142<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284818_p56194325241"><a name="zh-cn_topic_0000001127284818_p56194325241"></a><a name="zh-cn_topic_0000001127284818_p56194325241"></a>否</p> 143</td> 144<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284818_p1461983272420"><a name="zh-cn_topic_0000001127284818_p1461983272420"></a><a name="zh-cn_topic_0000001127284818_p1461983272420"></a>字体边框透明度</p> 145</td> 146</tr> 147</tbody> 148</table> 149 150## 示例<a name="zh-cn_topic_0000001127284818_section360556124815"></a> 151 152textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素<path\>曲线仅做参照）。 153 154``` 155/* xxx.css */ 156.container { 157 flex-direction: row; 158 justify-content: flex-start; 159 align-items: flex-start; 160 height: 1200px; 161 width: 600px; 162} 163``` 164 165``` 166<!-- xxx.hml --> 167<div class="container"> 168 <svg fill="#00FF00" x="50"> 169 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path> 170 <text> 171 <textpath fill="blue" startOffset="20%" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px"> 172 This is textpath test. 173 </textpath> 174 </text> 175 </svg> 176</div> 177``` 178 179 180 181textpath与tspan组合示例与效果图 182 183``` 184<!-- xxx.hml --> 185<div class="container"> 186 <svg fill="#00FF00" x="50"> 187 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path> 188 <text> 189 <textpath fill="blue" startOffset="20%" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="15px"> 190 <tspan dx="-50px" fill="red">This is tspan onTextPath.</tspan> 191 <tspan font-size="25px">Let's play.</tspan> 192 <tspan font-size="30px" fill="#00FF00">12345678912354567891234567891234567891234567891234567890</tspan> 193 </textpath> 194 </text> 195 </svg> 196</div> 197``` 198 199 200 201``` 202<!-- xxx.hml --> 203<div class="container"> 204 <svg fill="#00FF00" x="50"> 205 <path d="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600" stroke="red" fill="none"></path> 206 <text> 207 <textpath fill="#D2691E" path="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600" font-size="30px" stroke="black" stroke-width="1" > 208 This is TextPath. 209 <tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan> 210 <tspan font-size="30px">Let's play.</tspan> 211 <tspan font-size="40px" fill="#00FF00" stroke="blue" stroke-width="2">12345678912354567891234567891234567891234567891234567890</tspan> 212 </textpath> 213 </text> 214 </svg> 215</div> 216``` 217 218 219 220``` 221<!-- xxx.hml --> 222<div class="container"> 223 <svg fill="#00FF00" x="50"> 224 <path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none"></path> 225 <!-- 数值百分比 --> 226 <text> 227 <textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px"> 228 This is TextPath. 229 <tspan x="50" fill="blue">This is first tspan.</tspan> 230 <tspan x="50%">This is second tspan.</tspan> 231 <tspan dx="10%">12345678912354567891234567891234567891234567891234567890</tspan> 232 </textpath> 233 </text> 234 </svg> 235</div> 236``` 237 238 239 240startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。 241 242``` 243<!-- xxx.css --> 244.container { 245 flex-direction: row; 246 justify-content: flex-start; 247 align-items: flex-start; 248 height: 3000px; 249 width: 1080px; 250} 251``` 252 253``` 254<!-- xxx.hml --> 255<div class="container"> 256 <svg fill="#00FF00"> 257 <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path> 258 <text> 259 <textpath fill="blue" startOffset="10%" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="15px"> 260 <tspan dx="-50px" fill="red">This is tspan onTextPath.</tspan> 261 <tspan font-size="25px">Let's play.</tspan> 262 <tspan font-size="30px" fill="#00FF00">12345678912354567891234567891234567891234567891234567890</tspan> 263 <animate attributeName="startOffset" from="10%" to="40%" dur="3s" repeatCount="indefinite"></animate> 264 </textpath> 265 </text> 266 </svg> 267</div> 268``` 269 270 271 272textpath与tspan组合属性动画与效果图 273 274``` 275<!-- xxx.hml --> 276<div class="container"> 277 <svg fill="#00FF00"> 278 <path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none"></path> 279 <text> 280 <textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px"> 281 This is TextPath. 282 <tspan x="50" fill="blue"> 283 tspan attribute x|rotate 284 <animate attributeName="x" from="50" to="100" dur="5s" repeatCount="indefinite"></animate> 285 <animate attributeName="rotate" from="0" to="360" dur="5s" repeatCount="indefinite"></animate> 286 </tspan> 287 <tspan x="30%">tspan static.</tspan> 288 <tspan> 289 tspan attribute dx|opacity 290 <animate attributeName="dx" from="0%" to="30%" dur="3s" repeatCount="indefinite"></animate> 291 <animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 292 </tspan> 293 <tspan dx="5%">tspan move</tspan> 294 </textpath> 295 </text> 296 </svg> 297</div> 298``` 299 300 301 302\(1\) "tspan attribute x|rotate" 文本绘制起点偏移从50px运动到100px，顺时针旋转0度到360度。 303 304\(2\) "tspan attribute dx|opacity" 在 "tspan static." 绘制结束后再开始绘制，向后偏移量从0%运动到30%，透明度从浅到深变化。 305 306\(3\) "tspan move" 在上一段tspan绘制完成后，向后偏移5%的距离进行绘制，呈现跟随前一段tspan运动的效果。 307 308textpath与tspan组合属性动画与效果图 309 310``` 311<!-- xxx.hml --> 312<div class="container"> 313 <svg fill="#00FF00"> 314 <path d="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" stroke="red" fill="none"></path> 315 <text> 316 <textpath fill="#D2691E" path="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" font-size="30px"> 317 This is TextPath. 318 <tspan dx="20" fill="blue"> 319 tspan attribute fill|fill-opacity 320 <animate attributeName="fill" from="blue" to="red" dur="3s" repeatCount="indefinite"></animate> 321 <animate attributeName="fill-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 322 </tspan> 323 <tspan dx="20" fill="blue"> 324 tspan attribute font-size 325 <animate attributeName="font-size" from="10" to="50" dur="3s" repeatCount="indefinite"></animate> 326 </tspan> 327 </textpath> 328 <tspan font-size="30">Single tspan</tspan> 329 </text> 330 </svg> 331</div> 332``` 333 334 335 336\(1\) "This is TextPath." 在path上无偏移绘制第一段文本内容，大小30px，颜色"\#D2691E"。 337 338\(2\) "tspan attribute fill|fill-opacity" 相对上一段文本结束后偏移20px，颜色从蓝到红，透明度从浅到深。 339 340\(3\) "tspan attribute font-size" 绘制起点相对上一段结束后偏移20px，起点静止，字体大小从10px到50px，整体长度持续拉长。 341 342\(4\) "Single tspan" 在上一段的尾部做水平绘制，呈现跟随上一段运动的效果。 343 344textpath与tspan组合属性动画与效果图 345 346``` 347<!-- xxx.hml --> 348<div class="container"> 349 <svg fill="#00FF00"> 350 <path d="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" stroke="red" fill="none"></path> 351 <text> 352 <textpath fill="#D2691E" path="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" font-size="30px"> 353 This is TextPath. 354 <tspan dx="20" fill="blue"> 355 tspan attribute stroke 356 <animate attributeName="stroke" from="red" to="#00FF00" dur="3s" repeatCount="indefinite"></animate> 357 </tspan> 358 <tspan dx="20" fill="white" stroke="red"> 359 tspan attribute stroke-width-opacity 360 <animate attributeName="stroke-width" from="1" to="5" dur="3s" repeatCount="indefinite"></animate> 361 <animate attributeName="stroke-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 362 </tspan> 363 </textpath> 364 </text> 365 </svg> 366</div> 367``` 368 369 370 371\(1\) "tspan attribute stroke" 轮廓颜色从红色逐渐转变成绿色。 372 373\(2\) "tspan attribute stroke-width-opacity" 轮廓宽度从细1px转变粗5px，透明度从浅到深。 374 375
