วิธีการวาดรูปหลายเหลี่ยมใน HTML5 SVG?

SVG ย่อมาจาก Scalable Vector Graphics และเป็นภาษาสำหรับการอธิบายกราฟิก 2 มิติและแอปพลิเคชันกราฟิกใน XML จากนั้น XML จะแสดงผลโดยโปรแกรมดู SVG เว็บเบราว์เซอร์ส่วนใหญ่สามารถแสดง SVG ได้เหมือนกับที่แสดง PNG, GIF และ JPG

ในการวาดรูปหลายเหลี่ยมใน HTML SVG ให้ใช้องค์ประกอบ SVG องค์ประกอบสร้างกราฟิกที่มีอย่างน้อยสามด้าน แอตทริบิวต์ points คือพิกัด x และ y สำหรับแต่ละมุมของรูปหลายเหลี่ยม

ตัวอย่าง

คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีวาดรูปหลายเหลี่ยมใน HTML5 SVG

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            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>

ผลลัพธ์

วิธีการวาดรูปหลายเหลี่ยมใน HTML5 SVG?