วิธีวาดวงกลมว่าง (Hollow Circle) ใน SVG

บทนำ

การวาดวงกลมว่าง (มีแต่ขอบ ไม่มีสีเติม) ใน SVG ทำได้โดยกำหนด:

fill="none" - ไม่เติมสี
stroke="color" - สีขอบ
stroke-width="number" - ความหนาขอบ

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

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

แอตทริบิวต์เสริมสำหรับ Stroke

แอตทริบิวต์	คำอธิบาย
`stroke-dasharray`	เส้นขีด-เว้น (เช่น "5,5" = จุดประทับ)
`stroke-dashoffset`	ตำแหน่งเริ่มต้นของ dash pattern
`stroke-linecap`	รูปปลายเส้น: butt, round, square
`stroke-linejoin`	รูปมุมเชื่อม: miter, round, bevel

ตัวอย่างเส้นประ

<circle cx="100" cy="50" r="40" 
     stroke="black" stroke-width="3" 
     stroke-dasharray="5,5" fill="none" />