วิธีวาดสี่เหลี่ยมผืนผ้าใน HTML5 SVG

บทนำ

ใช้แท็ก <rect> สำหรับวาดสี่เหลี่ยมผืนผ้าใน SVG พารามิเตอร์หลัก:

• x, y = พิกัดมุมซ้ายบน (ค่าเริ่มต้น 0,0)
• width, height = ความกว้างและความสูง
• fill = สีเติม
• rx, ry = รัศมีมุมโค้ง (ถ้าต้องการ)

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

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

แอตทริบิวต์เพิ่มเติม

• stroke - สีขอบ
• stroke-width - ความหนาขอบ
• opacity - ความโปร่งแสง (0-1)