Làm thế nào để vẽ một hình tròn rỗng trong SVG?

Để vẽ một hình tròn rỗng trong SVG, hãy sử dụng phần tử . Để làm được điều đó, hãy sử dụng fill =”none” và vẽ đường viền.

SVG là viết tắt của Scalable Vector Graphics và là ngôn ngữ để mô tả các ứng dụng đồ họa và đồ họa 2D trong XML và XML sau đó được trình xem SVG hiển thị. Hầu hết các trình duyệt web có thể hiển thị SVG giống như chúng có thể hiển thị PNG, GIF và JPG.

Ví dụ

Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách vẽ một hình tròn rỗng trong SVG

<!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>

Làm thế nào để vẽ một hình tròn rỗng trong SVG?

Ví dụ

Đầu ra