SVG <polygon>

SVG สี่เหลี่ยมประกอบ - <polygon>

<polygon> ตัวแทนใช้สร้างรูปที่มีอย่างน้อยสามขอบ

สี่เหลี่ยมประกอบด้วยสายตรงและมีรูปร่างที่ "ปิดหมด" (ทุกสายตรงเชื่อมโยงกัน)

คำว่า Polygon มาจากภาษากรีก."Poly" หมายถึง "หลาย" และ "gon" หมายถึง "มุม"。

ตัวอย่าง 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

เปลี่ยนค่า fill-rule ให้เป็น "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>

ลองทดลองด้วยตัวเอง