<polygon>

💾 https://replit.com/@pegasusroe/svg-polygon

💈範例

polygon

<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>

With polygon and polyline, it's just a suggestion, but not a requirement to separate the x,y pairs with commas.

index.html

	<!-- 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>

⭐️ 重點

With polygon and polyline, it's just a suggestion, but not a requirement to separate the x,y pairs with commas.

👥 相關

• <canvas> ⟩ regular polygons - add polygon subpath.