1# path<a name="ZH-CN_TOPIC_0000001210135639"></a> 2 3绘制路径。 4 5> **说明：** 6>从API Version 7 开始支持。 7 8## 权限列表<a name="zh-cn_topic_0000001173164771_section11257113618419"></a> 9 10无 11 12## 子组件<a name="zh-cn_topic_0000001173164771_section9288143101012"></a> 13 14支持animate、animateMotion、animateTransform。 15 16## 属性<a name="zh-cn_topic_0000001173164771_section2907183951110"></a> 17 18支持所列的Svg组件通用属性和以下表格的属性，设置的通用属性会传递给子组件。 19 20<a name="zh-cn_topic_0000001173164771_table20633101642315"></a> 21<table><thead align="left"><tr id="zh-cn_topic_0000001173164771_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173164771_aaf1247770b244944bbcc9f28d9a6f00b"><a name="zh-cn_topic_0000001173164771_aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="zh-cn_topic_0000001173164771_aaf1247770b244944bbcc9f28d9a6f00b"></a>名称</p> 22</th> 23<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173164771_a6efc3502761f4faf9630e484280f75b6"><a name="zh-cn_topic_0000001173164771_a6efc3502761f4faf9630e484280f75b6"></a><a name="zh-cn_topic_0000001173164771_a6efc3502761f4faf9630e484280f75b6"></a>类型</p> 24</th> 25<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173164771_a27a37273d9ad47569ddbcb8db985d302"><a name="zh-cn_topic_0000001173164771_a27a37273d9ad47569ddbcb8db985d302"></a><a name="zh-cn_topic_0000001173164771_a27a37273d9ad47569ddbcb8db985d302"></a>默认值</p> 26</th> 27<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173164771_p824610360217"><a name="zh-cn_topic_0000001173164771_p824610360217"></a><a name="zh-cn_topic_0000001173164771_p824610360217"></a>必填</p> 28</th> 29<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173164771_a2ff3361bfd3b420ba4967452d2ddd098"><a name="zh-cn_topic_0000001173164771_a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="zh-cn_topic_0000001173164771_a2ff3361bfd3b420ba4967452d2ddd098"></a>描述</p> 30</th> 31</tr> 32</thead> 33<tbody><tr id="zh-cn_topic_0000001173164771_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164771_a83b6dd280109466fb015e64de1ef4df3"><a name="zh-cn_topic_0000001173164771_a83b6dd280109466fb015e64de1ef4df3"></a><a name="zh-cn_topic_0000001173164771_a83b6dd280109466fb015e64de1ef4df3"></a>id</p> 34</td> 35<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164771_abc38fa2b85854bc687af75eb17a00a4d"><a name="zh-cn_topic_0000001173164771_abc38fa2b85854bc687af75eb17a00a4d"></a><a name="zh-cn_topic_0000001173164771_abc38fa2b85854bc687af75eb17a00a4d"></a>string</p> 36</td> 37<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164771_a8d12e4af905d4743a5ec9cd6018d2972"><a name="zh-cn_topic_0000001173164771_a8d12e4af905d4743a5ec9cd6018d2972"></a><a name="zh-cn_topic_0000001173164771_a8d12e4af905d4743a5ec9cd6018d2972"></a>-</p> 38</td> 39<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164771_p42461736102118"><a name="zh-cn_topic_0000001173164771_p42461736102118"></a><a name="zh-cn_topic_0000001173164771_p42461736102118"></a>否</p> 40</td> 41<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164771_a1a1731af05554f119fa365748f276bb2"><a name="zh-cn_topic_0000001173164771_a1a1731af05554f119fa365748f276bb2"></a><a name="zh-cn_topic_0000001173164771_a1a1731af05554f119fa365748f276bb2"></a>组件的唯一标识。</p> 42</td> 43</tr> 44<tr id="zh-cn_topic_0000001173164771_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164771_a97f90720f6ef448fb3afbb3b1c13ae25"><a name="zh-cn_topic_0000001173164771_a97f90720f6ef448fb3afbb3b1c13ae25"></a><a name="zh-cn_topic_0000001173164771_a97f90720f6ef448fb3afbb3b1c13ae25"></a>d</p> 45</td> 46<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164771_a165d9cd14ccf4127b2e22cc6397680ac"><a name="zh-cn_topic_0000001173164771_a165d9cd14ccf4127b2e22cc6397680ac"></a><a name="zh-cn_topic_0000001173164771_a165d9cd14ccf4127b2e22cc6397680ac"></a>string</p> 47</td> 48<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164771_a836c513375114f6dac7693e0b4f33230"><a name="zh-cn_topic_0000001173164771_a836c513375114f6dac7693e0b4f33230"></a><a name="zh-cn_topic_0000001173164771_a836c513375114f6dac7693e0b4f33230"></a>-</p> 49</td> 50<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164771_p17246836142119"><a name="zh-cn_topic_0000001173164771_p17246836142119"></a><a name="zh-cn_topic_0000001173164771_p17246836142119"></a>否</p> 51</td> 52<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164771_adbe7ecbee96b4f938b04a4b8d62791bf"><a name="zh-cn_topic_0000001173164771_adbe7ecbee96b4f938b04a4b8d62791bf"></a><a name="zh-cn_topic_0000001173164771_adbe7ecbee96b4f938b04a4b8d62791bf"></a>设置路径的形状。包含一组字符指令，大写字母为绝对路径，小写字符为相对路径。</p> 53<p id="zh-cn_topic_0000001173164771_p46751932620"><a name="zh-cn_topic_0000001173164771_p46751932620"></a><a name="zh-cn_topic_0000001173164771_p46751932620"></a>字母指令表示的意义如下：</p> 54<a name="zh-cn_topic_0000001173164771_ul146753321226"></a><a name="zh-cn_topic_0000001173164771_ul146753321226"></a><ul id="zh-cn_topic_0000001173164771_ul146753321226"><li>M/m = moveto</li><li>L/l = lineto</li><li>H/h = horizontal lineto</li><li>V/v = vertical lineto</li><li>C/c = curveto</li><li>S/s = smooth curveto</li><li>Q/q = quadratic Belzier curve</li><li>T/t = smooth quadratic Belzier curveto</li><li>A/a = elliptical Arc</li><li>Z/z = closepath</li></ul> 55</td> 56</tr> 57</tbody> 58</table> 59 60## 示例<a name="zh-cn_topic_0000001173164771_section360556124815"></a> 61 62``` 63<!-- xxx.hml --> 64<div class="container"> 65 <svg width="400" height="400"> 66 <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" 67 stroke="blue" stroke-width="3" fill="red"> 68 </path> 69 </svg> 70</div> 71``` 72 73 74 75
