Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีวาดรูปหลายเหลี่ยม (Polygon) ใน HTML5 SVG


บทนำ

ใช้แท็ก <polygon> เพื่อสร้างรูปหลายเหลี่ยมที่มีอย่างน้อย 3 ด้าน แอตทริบิวต์ points ระบุพิกัดมุมแต่ละมุม

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem { position: relative; left: 10%; transform: translateX(-20%); }
    </style>
    <title>HTML5 SVG Polygon</title>
  </head>
  <body>
    <h2>HTML5 SVG Polygon</h2>
    <svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
      <polygon points="100,20 200,180 100,200" style="fill:green;" />
    </svg>
  </body>
</html>

ตัวอย่างรูปทรงต่างๆ

  • สามเหลี่ยม: 3 จุด
  • สี่เหลี่ยม: 4 จุด
  • ห้าเหลี่ยม: 5 จุด
  • ดาว: 10 จุด (สลับระหว่างจุดในและจุดนอก)