svg를 이용하면 벡터기반의 이미지를 그릴 수 있다. 가장 간단한 원부터 그려보도록 한다. svg를 사용하여 원부터 그려보면 어떻게 svg를 이용해 이미지를 그릴 수 있을지 감을 잡을 수 있을 것이다. svg로 원을 그리기 위해서는 svg 태그와 circle 태그를 이용한다.
svg 원 그리기
draw circle
svg를 이용하여 원을 그리기 위해서 svg 태그와 circle 태그를 이용한다.
원을 그리기 위한 태그의 기본형식은 아래와 같다.
<svg>
<circle>
</svg>기본형식을 알면 나머지는 속성을 찾아 원을 그릴 수 있다.
실제로 원을 그려보기 위한 태그는 아래와 같다.
<html>
<body>
<h1>SVG 원 그리기</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="green" />
</svg>
</body>
</html>결과화면은 아래와 같다.
svg로 원을 그리는 간단한 형태이다.
이제 속성값이 의미하는 바가 무엇인지 살펴보자.
svg 의 기본 태그 속성은 아래와 같다.
- svg
벡터 기반 이미지를 그린다. - width
svg 이미지의 가로 ( 너비 ) 크기를 지정한다. - height
svg 이미지의 세로 ( 높이 ) 크기를 지정한다.
원그리기 circle 의 태그 속성은 아래와 같다.
- circle
svg 원을 그린다. - cx
원의 중심에서 이동할 x좌표를 지정한다. - cy
원의 중심에서 이동할 y좌표를 지정한다. - r
원의 반지름을 지정한다. - stroke
원의 외곽선의 색을 지정한다. - stroke-width
원의 외곽선 굵기를 지정한다. - fill
원 내부의 색을 지정한다.
circle 속성에서 cx와 cy의 값이 난해할 수 있다.
cx와 cy의 값을 지정하지 않으면 원의 좌표는 0,0 의 좌표에 지정된다.
지정하지 않은 원이 어디에 위치하는지 확인하자.
cx와 cy값을 지정하지 않으면 원의 중심이 좌표계 0,0 으로 설정된 것을 알 수 있다.
svg 의 너비와 높이의 값은 각각 100 100 이다.
원의 반지름인 r 값은 40이다.
원이 svg 영역 가운데에 오지 않더라도 원을 전부 표시하려면 cx 와 cy 의 값을 지정한 후 원을 이동시켜야 한다.
그렇기에 위의 코드를 보면 cx=50, cy=50 값을 지정하였다.
반응형
'programming > Graphics' 카테고리의 다른 글
| svg 다각형 폴리곤 그리기 draw svg polygon (0) | 2021.09.05 |
|---|---|
| svg 선 그리기 draw svg line (0) | 2021.09.04 |
| svg 타원 그리기 draw svg eclipse (0) | 2021.09.02 |
| svg 사각형 그리기 draw rectangle (0) | 2021.08.31 |
| svg 파일과 html 관계 및 장점 Scarable Vector Graphic (0) | 2021.08.27 |
댓글