> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/svg/shape/polygon.md).

# \<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](/web/browser/svg/shape/polygon.md) and [polyline](/web/browser/svg/shape/polyline.md), 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](/web/browser/svg/shape/polygon.md) and polyline, it's just a **suggestion**, but **not a requirement** to separate the **x,y pairs** with **commas**.
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}

* [\<canvas>](/web/browser/canvas.md) ⟩ [regular polygons](/web/browser/canvas/examples/polygon.md) - add polygon subpath.
  {% endtab %}
  {% endtabs %}