svg path 를 이용해 점의 이동경로를 표시할 때 절대좌표와 상대좌표를 이용해 표현할 수 있다. 절대좌표는 점의 이동경로의 도착지가 어디에 위치하는지 정확하게 설정하지만 상대좌표는 이동경로의 도착지 좌표가 얼마만큼 이동했는지를 표시하는 의미이기도 하다. 방향성을 가지고 있기 때문에 + - 의 기호가 붙는다.
svg path 패스 절대좌표 상대좌표
너비와 높이가 정해진 좌표계에서 좌표는 0,0 부터 정해진 너비와 높이까지 모든 점이 존재한다.
그 점들을 svg path 로 표현하여 점의 이동경로를 선으로써 표현할 수 있다.
svg path 는 선이 아닌 점이 이동경로인 것에 주목하자.
( 가시적으로는 선으로써 보인다. )
점의 이동경로에 대해 절대좌표와 상대좌표를 이해하기 전에 이전에 작성한 svg 패스 선그리기를 참조해 본다.
▶ svg path 패스 수평선 수직선 그리기 draw svg Horizontal Vertical line path
절대좌표 선그리기
간단한 선을 그린다.
먼저 그려볼 선은 ㄱ 자 형태로 절대좌표를 이용해 점의 이동경로를 표현할 것이다.
너비와 높이가 각각 300,300 인 좌표계를 만들었다.
- 시작점은 100,100 이다.
- H 200,100 인 위치로 점의 이동경로를 그린다. ( 수평선 )
- V 200,200 인 위치로 점의 이동경로를 그린다. ( 수직선 )
<html>
<body>
<h1>SVG 경로 그리기</h1>
<svg height="300" width="300" style="border:1px solid black;">
<path d="M 100,100 H 200 V 200"
stroke="#eb6e4c" fill="none" stroke-width="1" stroke-linecap="round" />
</svg>
</body>
</html>위의 점이 그려지는 과정을 코드에서 비교하면 아래와 같다.
점이 이동하는 모든 도착지 좌표를 절대좌표로 정해주었다.
- M 100,100
- H 200, 100
- V 200, 200
위의 순서까지 표시한 결과화면은 아래와 같다.
- 점의 최조 시작위치 M 100, 100
- 수평 이동좌표 H 200, 100
- 수직 이동좌표 V 200, 200
상대좌표 선그리기
절대좌표는 점의 이동하는 도착지 좌표가 정확하게 설정되기 때문에 방향성이 필요가 없다.
하지만, 상대좌표를 사용할 경우 + - 의 방향성을 가진다.
- 수평선의 경우 오른쪽은 + , 왼쪽은 - 의 방향성을 가진다.
- 수직선의 경우 아래쪽은 + , 위쪽은 - 의 방향성을 가진다.
이것은 모니터에 그려지는 x,y 좌표와 같다.
모니터에 주사되는 모든 객체들은
왼쪽에 오른쪽으로 그리고 위에서 아래로 주사된다.
위의 결과화면를 상대좌표로 표시해 본다.
어렵다면 편하게 더하기 빼기의 개념으로 이해하도록 하자.
- 우측으로 얼마 +N , 좌측으로 얼마 -N
- 아래로 얼마 +N , 위쪽으로 얼마 -N
<html>
<body>
<h1>SVG 경로 그리기</h1>
<svg height="300" width="300" style="border:1px solid black;">
<path d="M 100,100 h 100 v 100"
stroke="#eb6e4c" fill="none" stroke-width="1" stroke-linecap="round" />
</svg>
</body>
</html>차이가 보이는지
일단 인자값이 H 200 과 V 200 이 h 100 v 100 으로 변경된 것에 주목하자.
대문자 H 와 V 는 절대좌표를 의미한다.
소문자 h 와 v 는 상대좌표를 의미한다.
그렇다면 위의 구문은 다음과 같다.
- 점의 최조 시작위치 M 100, 100
- 수평 이동좌표 h 100 우측으로 100만큼 이동한다.
- 수직 이동좌표 v 100 아래로 100만큼 이동한다.
상대좌표는 방향성을 가진다고 언급했다.
우측과 아래쪽의 방향성은 + 이기 때문에 인자값만 소문자로 변경하면 된다.
그렇다면 반대의 경우는 어떨까
- 점의 최조 시작위치 M 200, 200
- 수평 이동좌표 h -100 좌측으로 100만큼 이동한다.
- 수직 이동좌표 v -100 위쪽으로 100만큼 이동한다.
코드로 만들면 아래와 같다.
<html>
<body>
<h1>SVG 경로 그리기</h1>
<svg height="300" width="300" style="border:1px solid black;">
<path d="M 200,200 h -100 v -100"
stroke="#eb6e4c" fill="none" stroke-width="1" stroke-linecap="round" />
</svg>
</body>
</html>위의 코드와 순서를 잘 파악한다.
아래의 결과화면의 숫자는 점이 이동한 순서이다.
인자값을 준 순서대로 상대적으로 동작하기 때문에 아래의 결과 화면처럼 나온다.
'programming > Graphics' 카테고리의 다른 글
| svg path 패스 3차 베지에곡선 이해 Cubic Bézier Curve (0) | 2021.09.17 |
|---|---|
| svg path 패스 베지에곡선 이해 Quadratic Bézier Curve (0) | 2021.09.16 |
| svg path 패스 수평선 수직선 그리기 draw svg Horizontal Vertical line path (0) | 2021.09.12 |
| svg path 패스 직선 그리기 점의 이동경로를 직선으로 표현 draw svg line path (0) | 2021.09.10 |
| svg 경로 패스 개념 종류 About svg path (0) | 2021.09.08 |
댓글