วิธีการวาดเส้นหลายเหลี่ยมใน 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: 20%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Polyline</title>
   </head>

   <body>
      <h2>HTML5 SVG Polyline</h2>
      <svg id="svgelem" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
         <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
      </svg>
   </body>
</html>

ผลลัพธ์

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