Cách vẽ hình tròn rỗng (hollow circle) trong SVG

Để vẽ hình tròn chỉ có viền (không tô màu bên trong), dùng <circle> với fill="none" và thiết lập stroke (màu viền) cùng stroke-width (độ dày viền).

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG Hollow Circle</title>
  </head>
  <body>
    <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="7" fill="none" />
    </svg>
  </body>
</html>

Thuộc tính chính: cx, cy tâm; r bán kính; stroke màu viền; stroke-width độ dày; fill="none" bỏ tô nền.