• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# polygon<a name="ZH-CN_TOPIC_0000001164895646"></a>
2
3绘制多边形。
4
5>![](../../public_sys-resources/icon-note.gif) **说明:**
6>从API Version 7 开始支持。
7
8## 权限列表<a name="zh-cn_topic_0000001127284872_section11257113618419"></a>
9
1011
12## 子组件<a name="zh-cn_topic_0000001127284872_section9288143101012"></a>
13
14支持animate、animateMotion、animateTransform。
15
16## 属性<a name="zh-cn_topic_0000001127284872_section2907183951110"></a>
17
18支持所列的Svg组件通用属性和以下表格的属性。
19
20<a name="zh-cn_topic_0000001127284872_table20633101642315"></a>
21<table><thead align="left"><tr id="zh-cn_topic_0000001127284872_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127284872_aaf1247770b244944bbcc9f28d9a6f00b"><a name="zh-cn_topic_0000001127284872_aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_a6efc3502761f4faf9630e484280f75b6"><a name="zh-cn_topic_0000001127284872_a6efc3502761f4faf9630e484280f75b6"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_a27a37273d9ad47569ddbcb8db985d302"><a name="zh-cn_topic_0000001127284872_a27a37273d9ad47569ddbcb8db985d302"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_p824610360217"><a name="zh-cn_topic_0000001127284872_p824610360217"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_a2ff3361bfd3b420ba4967452d2ddd098"><a name="zh-cn_topic_0000001127284872_a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="zh-cn_topic_0000001127284872_a2ff3361bfd3b420ba4967452d2ddd098"></a>描述</p>
30</th>
31</tr>
32</thead>
33<tbody><tr id="zh-cn_topic_0000001127284872_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284872_a83b6dd280109466fb015e64de1ef4df3"><a name="zh-cn_topic_0000001127284872_a83b6dd280109466fb015e64de1ef4df3"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_abc38fa2b85854bc687af75eb17a00a4d"><a name="zh-cn_topic_0000001127284872_abc38fa2b85854bc687af75eb17a00a4d"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_a8d12e4af905d4743a5ec9cd6018d2972"><a name="zh-cn_topic_0000001127284872_a8d12e4af905d4743a5ec9cd6018d2972"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_p42461736102118"><a name="zh-cn_topic_0000001127284872_p42461736102118"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_a1a1731af05554f119fa365748f276bb2"><a name="zh-cn_topic_0000001127284872_a1a1731af05554f119fa365748f276bb2"></a><a name="zh-cn_topic_0000001127284872_a1a1731af05554f119fa365748f276bb2"></a>组件的唯一标识。</p>
42</td>
43</tr>
44<tr id="zh-cn_topic_0000001127284872_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284872_a97f90720f6ef448fb3afbb3b1c13ae25"><a name="zh-cn_topic_0000001127284872_a97f90720f6ef448fb3afbb3b1c13ae25"></a><a name="zh-cn_topic_0000001127284872_a97f90720f6ef448fb3afbb3b1c13ae25"></a>points</p>
45</td>
46<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284872_a165d9cd14ccf4127b2e22cc6397680ac"><a name="zh-cn_topic_0000001127284872_a165d9cd14ccf4127b2e22cc6397680ac"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_a836c513375114f6dac7693e0b4f33230"><a name="zh-cn_topic_0000001127284872_a836c513375114f6dac7693e0b4f33230"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_p17246836142119"><a name="zh-cn_topic_0000001127284872_p17246836142119"></a><a name="zh-cn_topic_0000001127284872_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_0000001127284872_adbe7ecbee96b4f938b04a4b8d62791bf"><a name="zh-cn_topic_0000001127284872_adbe7ecbee96b4f938b04a4b8d62791bf"></a><a name="zh-cn_topic_0000001127284872_adbe7ecbee96b4f938b04a4b8d62791bf"></a>设置多边形的多个坐标点</p>
53<p id="zh-cn_topic_0000001127284872_p158933814449"><a name="zh-cn_topic_0000001127284872_p158933814449"></a><a name="zh-cn_topic_0000001127284872_p158933814449"></a>格式为[x1,y1 x2,y2 x3,y3]。</p>
54<p id="zh-cn_topic_0000001127284872_p78913383449"><a name="zh-cn_topic_0000001127284872_p78913383449"></a><a name="zh-cn_topic_0000001127284872_p78913383449"></a>支持属性动画,如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样,则无效</p>
55</td>
56</tr>
57</tbody>
58</table>
59
60## 示例<a name="zh-cn_topic_0000001127284872_section360556124815"></a>
61
62```
63<!-- xxx.hml -->
64<div class="container">
65    <svg fill="white" stroke="blue" width="400" height="400">
66        <polygon points="10,110 60,35 60,85 110,10" fill="red"></polygon>
67        <polygon points="10,200 60,125 60,175 110,100" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
68    </svg>
69</div>
70```
71
72![](figures/zh-cn_image_0000001166601648.png)
73
74