지난 번 학습에서는
직사각형과 원을 그리는 방법을 살펴보았습니다.
이번에는 좀더 다양한
그리기 요소들을 살펴보려고 합니다.
중복되는 설명은 생략할 수 있으니
이 파트를 처음 보시는 분은
Part 1을 먼저 보고 오시는 게 좋겠습니다.
3. 타원 그리기 - Ellipse
타원(Ellipse)이 원(circle)과 다른 점이 분명히 있겠죠?
우선 전체코드를 살펴보고
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Exercise</title>
<style>
svg { width: 500px; height: 500px; background: #ddd; }
</style>
</head>
<body>
<svg>
<rect x="10" y="10" width="200" height="100" fill="blue" stroke="black" stroke-width="3px"></rect>
<circle cx="200" cy="150" r="100" fill="green" stroke="yellow" stroke-width="10" fill-opacity="50%"></circle>
<ellipse cx="200" cy="300" rx="150" ry="100"></ellipse>
</svg>
</body>
</html>
아래 코드를 한번 살펴봅시다.
<ellipse cx="200" cy="300" rx="150" ry="100"></ellipse>
ellipse = 타원
cx : circle x 좌표
cy : circle y 좌표
rx : radius x = x 축방향 반지름 길이
ry : raduis y = y 축방향 반지름 길이
즉, 타원은 rx와 ry를 사용한다는 것이
뽀인트! 가 될듯합니다.
중심좌표가 x200, y300이고
x축 반지름 150, y축 반지름 100인
검정색 타원이 그려졌습니다.
Part 1의 내용을 참고해서
타원의 색상과 테두리를 변경해보세요.
4. 직선 그리기 - Line
직선(Line)은 어떻게 그려지게 될까요?
초등학교 시절을 곰곰히 생각해보면
직선에는 '시작점'과 '끝점'이 있다는 사실을
떠 올릴 수 있을 것입니다.
예제 코드를 싹~ 지우고 다시 작성해봅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Exercise</title>
<style>
svg { width: 500px; height: 500px; background: #ddd; }
</style>
</head>
<body>
<svg>
<line x1="20" y1="20" x2="300" y2="200" stroke="blue"></line>
</svg>
</body>
</html><line x1="20" y1="20" x2="300" y2="200" stroke="blue"></line>
line = 직선
x1, y1 : 시작점의 x좌표, y좌표
x2, y2 : 끝점의 x좌표, y좌표
※ Line은 Fill(채우기) 속성이 없고
Stroke(외관선) 속성만 있기 때문에
stroke="blue" 처럼
반드시 스트로크 속성을 써줘야 보이게 됩니다.
Stroke 값 디폴트가 1px이라 잘 안보여서
두께를 좀 더 줘봅니다.
직선은 이와 같은 방식으로
그려지게 됩니다.
x1, y1 → x2, y2 를 기억하는 게 관점일 것 같습니다.
※ 참고로 직선은 x3, y3와 같이
시작점과 끝점 외 포인트의 갯수가
3개 이상부터는 모두 무시됩니다.
5. 다중선, 다각형 그리기 - Polyline & Polygon
다중선은 복수(poly-)개의 직선(line)으로 이루어졌습니다.
그러면 라인(line)에서 처럼
x1, x2, x3, x4 ... 와 같은 식으로 증가할까요?
아닙니다!
상식적으로 컴퓨터는 같은 이름을
서로 다른 기능에 중복해서 사용하지 않습니다.
다중선(polyline)에서는
points라는 속성을 사용하게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Exercise</title>
<style>
svg { width: 500px; height: 500px; background: #ddd; }
</style>
</head>
<body>
<svg>
<line x1="20" y1="20" x2="300" y2="200"
stroke="blue" stroke-width="5"></line>
<polyline points="20 50, 300 100, 200 300"></polyline>
</svg>
</body>
</html>
아래 코드를 추가 작성했습니다.
<polyline points="20 50, 300 100, 200 300"></polyline>
polyline : 다중선
points : 좌표점들의 집합
위 예시에서는 의미론적으로
x1:20, y1:50
x2:300, y2:100
x3:200, y3:300
이라는 점들을 연결한 것으로
볼 수 있겠습니다.
세 포인트를 연결하는 직선이 그어졌는데,
내부가 검게 자동으로 채워져 있습니다.(fill)
polyline인데 내부가 채워져 있다는 게 재미있네요.
외곽선 테두리를 노란색으로 만들어봅니다.
<polyline points="20 50, 300 100, 200 300" stroke="yellow" stroke-width="10"></polyline>
가만 보니, 빨간 화살표 부분은
테두리 외관선(stroke)가 생기지 않는 군요.
그래서 polyline인가 봅니다.
polyline을 polygon(다각형)으로 변경해봅니다.
<polygon points="20 50, 300 100, 200 300" stroke="yellow" stroke-width="10"></polygon>
<polygon>으로 바꿔주니
비어 있던 제일 왼쪽 변이
노란색으로 마저 그려졌습니다.
바로 이런 차이점이
polyline과 polygon의 다른 점입니다.
일단은 이 정도로
svg를 이용한 도형 그리기 기초를
정리보았습니다.
찬찬히 풀어서 이해해보니
역시나 이번 내용도,
'SVG' 카테고리의 다른 글
| SVG 기초 - 도형 그리기 Part 3 (패스, path) (0) | 2022.11.28 |
|---|---|
| SVG 기초 - 도형 그리기 Part 1 (직사각형과 원, rectangle & circle) (0) | 2022.11.26 |
댓글