Cách tạo hình chữ nhật bo góc trong HTML5 SVG

SVG (Scalable Vector Graphics) cho phép vẽ hình chữ nhật bằng phần tử <rect>. Để bo góc, thiết lập thuộc tính rx (bán kính bo theo trục X) và ry (bán kính bo theo trục Y).

Ví dụ

Mã sau vẽ hình chữ nhật bo góc màu xanh dương:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 10%;
        transform: translateX(-20%);
      }
    </style>
    <title>SVG</title>
  </head>
  <body>
    <h2>HTML5 SVG Rectangle</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>

Mẹo: Nếu rx và ry bằng nhau, góc bo tròn đều. Nếu khác nhau, góc bo elip.