SVG에서 속이 빈 원, 즉 테두리(외곽선)만 있는 원을 그리려면 <circle> 요소를 사용합니다. 핵심은 fill="none" 속성을 지정해 내부를 채우지 않고, stroke와 stroke-width 속성으로 외곽선의 색상과 두께를 지정하는 것입니다.
SVG란 무엇인가?
SVG(Scalable Vector Graphics)는 XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 기술하기 위한 언어입니다. 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 최신 웹 브라우저는 PNG, GIF, JPG 이미지를 표시하듯 SVG도 별도의 플러그인 없이 바로 표시할 수 있습니다.
예제 코드
아래 예제 코드를 실행하면 SVG에서 속이 빈 원을 그리는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML5 SVG 속이 빈 원</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>
코드 설명
- cx, cy: 원의 중심 좌표를 지정합니다. 위 예제에서는 x축 100, y축 50 위치에 중심이 있습니다.
- r: 원의 반지름을 지정합니다. 여기서는 40입니다.
- stroke: 외곽선 색상을 지정합니다. 검정색(black)으로 설정했습니다.
- stroke-width: 외곽선의 두께를 지정합니다. 7px로 설정했습니다.
- fill="none": 원 내부를 채우지 않아 속이 빈 원이 됩니다. 이 속성이 핵심입니다.
실행 결과
위 코드를 브라우저에서 실행하면 검은색 굵은 테두리만 있는 속이 빈 원이 화면에 나타납니다. stroke 색상과 stroke-width 값을 조절하면 다양한 스타일의 빈 원을 쉽게 만들 수 있습니다.