SVG รูปหลายเหลี่ยม - <รูปหลายเหลี่ยม>
<polygon> องค์ประกอบที่ใช้ในการสร้างกราฟิกที่มีอย่างน้อยสามด้าน
รูปหลายเหลี่ยมที่ทำจากเส้นตรงและรูปร่างจะ "closed" (ทุกสายเชื่อมต่อขึ้นไป)
รูปหลายเหลี่ยมมาจากภาษากรีก "Poly" หมายความว่า "many" และ "gon" หมายถึง "angle"
ตัวอย่างที่ 1
ตัวอย่างต่อไปนี้สร้างรูปหลายเหลี่ยมที่มีสามด้าน:
นี่คือรหัส SVG นี้:
ตัวอย่าง
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
ลองตัวเอง» Code explanation:
- points แอตทริบิวต์กำหนด x และ y พิกัดสำหรับมุมของรูปหลายเหลี่ยมแต่ละ
ตัวอย่างที่ 2
ตัวอย่างต่อไปนี้สร้างรูปหลายเหลี่ยมที่มีสี่ด้าน:
นี่คือรหัส SVG นี้:
ตัวอย่าง
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
ลองตัวเอง» ตัวอย่างที่ 3
ใช้ <polygon> องค์ประกอบในการสร้างดาว:
นี่คือรหัส SVG นี้:
ตัวอย่าง
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
ลองตัวเอง» ตัวอย่างที่ 4
เปลี่ยนสถานที่ให้บริการเติมกฎที่จะ "evenodd" :
นี่คือรหัส SVG นี้:
ตัวอย่าง
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
ลองตัวเอง»