1# polyline
2
3
4>  **NOTE**
5>
6>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
7
8The **\<polyline>** component is used to draw a polyline.
9
10## Required Permissions
11
12None
13
14
15## Child Components
16
17The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
18
19
20## Attributes
21
22The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported.
23
24| Name| Type| Default Value| Mandatory| Description|
25| -------- | -------- | -------- | -------- | -------- |
26| id | string | - | No| Unique ID of the component.|
27| points | string | - | No| Multiple coordinates of the polyline.<br>The format is [x1,y1 x2,y2 x3,y3].<br>Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.|
28
29
30## Example
31
32```html
33<!-- xxx.hml -->
34<div class="container">
35  <svg fill="white" stroke="blue" width="400" height="400">
36    <polyline points="10,110 60,35 60,85 110,10" fill="red"></polyline>
37    <polyline points="10,200 60,125 60,175 110,100" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
38  </svg>
39</div>
40```
41
42
43![en-us_image_0000001173164845](figures/en-us_image_0000001173164845.png)
44