วิธีวาดเส้นใน HTML5 SVG

SVG (Scalable Vector Graphics) ภาษาอธิบาย 2D graphics ใน XML เบราว์เซอร์สมัยใหม่แสดงได้

เพื่อวาดเส้นใน SVG ใช้แท็ก <line>

ตัวอย่าง: วาดเส้นทแยง

<!DOCTYPE html> <html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 10%;
        transform: translateX(-20%);
      }
    </style>
    <title>HTML5 SVG Line</title>
  </head>
  <body>
    <h2>HTML5 SVG Line</h2>
    <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
      <line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2"/>
    </svg>
  </body>
</html>

แอตทริบิวต์ของ <line>

แอตทริบิวต์	คำอธิบาย
`x1`	พิกัด x จุดเริ่มต้น
`y1`	พิกัด y จุดเริ่มต้น
`x2`	พิกัด x จุดสิ้นสุด
`y2`	พิกัด y จุดสิ้นสุด
`stroke`	สีเส้น
`stroke-width`	ความหนาเส้น
`stroke-linecap`	รูปปลายเส้น (`butt`, `round`, `square`)

SVG Coordinate System

(0,0) อยู่มุมซ้ายบน (top-left)
x เพิ่มไปทางขวา, y เพิ่มไปทางล่าง
หน่วยเป็น pixels (default) หรือ unitless (scale ตาม viewBox)

ข้อดี: เส้น SVG ขยายไม่แตก สไตล์ด้วย CSS ได้ แอนิเมทด้วย CSS/SMIL/JS ได้