원
SVG 원 – <circle>
<circle> 요소는 원을 만드는 데 사용된다.
<circle> 요소에는 원의 위치와 크기를 설정하는 세 가지 기본 속성이 있다.
| 속성명 | 설명 |
|---|---|
| r | 필수. 원의 반지름 |
| cx | 원의 x축 중심. 기본값은 0 |
| cy | 원의 y축 중심. 기본값은 0 |
SVG 원
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" />
</svg>- r 속성은 원의 반지름을 정의한다.
- cx 및 cy 속성은 원의 x축 및 y축 중심을 정의한다. 생략하면 원의 중심이 (0,0)으로 설정된다.
- fill 속성은 원의 색상을 정의한다.
테두리가 있는 SVG 원
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" stroke="green" stroke-width="3" />
</svg>- stroke 속성은 원 주위의 테두리 색상을 정의한다.
- stroke-width 속성은 원 주위의 테두리 너비를 정의한다.
기본 예시
예제 보기불투명도가 있는 SVG 원
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" stroke="green" stroke-width="3" opacity="0.5" />
</svg>- opacity 속성은 원의 불투명도를 정의한다.
참고
W3C School - SVG <circle>
