SVG <รูปหลายเหลี่ยม>
รูปหลายเหลี่ยม SVG - <รูปหลายเหลี่ยม>
องค์ประกอบ <รูปหลายเหลี่ยม> ใช้เพื่อสร้างกราฟิกที่มีอย่างน้อยสามด้าน
รูปหลายเหลี่ยมเป็นเส้นตรง และรูปร่าง "ปิด" (ทุกเส้นเชื่อมกัน)
รูปหลายเหลี่ยมมาจากภาษากรีก "โพลี" แปลว่า "มากมาย" และ "กอน" แปลว่า "มุม"
ตัวอย่าง 1
ตัวอย่างต่อไปนี้สร้างรูปหลายเหลี่ยมที่มีสามด้าน:
นี่คือรหัส SVG:
ตัวอย่าง
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
คำอธิบายรหัส:
- แอตทริบิวต์ 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>