# \<polygon>

:floppy\_disk: [https://replit.com/@pegasusroe/svg-polygon](https://replit.com/@pegasusroe/svg-polygon#index.html)

{% tabs %}
{% tab title="💈範例" %}
![polygon](https://30b7d283-3e34-47b6-b3af-4686fafd8530.id.repl.co/svg/star.svg)

```markup
<svg viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
    <polygon 
        points="95,95 120,5 150,95 235,95 165,150 195,235 120,180 50,235 75,150 5,95" 
        fill="hsla(60,100%,50%,0.8)"
    ></polygon>
</svg>
```

{% hint style="warning" %}
With [polygon](polygon) and [polyline](polyline), it's just a **suggestion**, but **not a requirement** to separate the **x,y pairs** with **commas**.
{% endhint %}
{% endtab %}

{% tab title="index.html" %}
```markup
	<!-- star -->
<svg viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="svg/grid.svg#grid" />
    <polygon 
        points="95,95 120,5 150,95 235,95 165,150 195,235 120,180 50,235 75,150 5,95" 
        fill="hsla(60,100%,50%,0.8)"
    ></polygon>
</svg>

	<!-- other stuff -->
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
		<use xlink:href="svg/grid.svg#grid" />
    <use xlink:href="svg/letterR.svg#letterR" />
    <use xlink:href="svg/ellipse.svg#ellipse" />
    <use xlink:href="svg/star.svg#star" />
</svg>
```
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
With [polygon](polygon) and polyline, it's just a **suggestion**, but **not a requirement** to separate the **x,y pairs** with **commas**.
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* [canvas](../../canvas "mention") ⟩ [polygon](../../canvas/examples/polygon "mention") - add polygon subpath.
{% endtab %}
{% endtabs %}
