วิธาสร้างสี่เหลี่ยมผืนผ้ามุมโค้งใน HTML5 SVG

บทนำ

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

rx = รัศมีมุมโค้งแกน X
ry = รัศมีมุมโค้งแกน Y

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem { position: relative; left: 10%; transform: translateX(-20%); }
    </style>
    <title>SVG Rounded Rectangle</title>
  </head>
  <body>
    <h2>HTML5 SVG Rectangle with Rounded Corners</h2>
    <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
      <rect x="50" y="20" rx="30" ry="30" width="150" height="150" style="fill:blue;" />
    </svg>
  </body>
</html>

หมายเหตุ

ถ้า rx และ ry มีค่าเท่ากัน จะได้มุมโค้งวงกลมสมบูรณ์ หากต่างกันจะได้มุมโค้งรูปไข่