svg path 패스 수평선 수직선 그리기 draw svg Horizontal Vertical line path

svg 패스 path 를 이용하면 수평선 수직선을 그릴 수 있다. 인자값은 수평선은 H 수직선은 V 이다. 수평선은 점이 가로로 이동할 좌표를 설정하면 되며 수직선은 점이 세로로 이동할 좌표를 설정하면 된다. 즉, 좌표는 하나씩만 설정하면 된다. 인자값이 설정되면 그 뒤에 붙는 좌표들 또한 같은 속성으로 동작하는 것을 상기한다.

svg path 패스 수평선 수직선 그리기
draw svg Horizontal Vertical line path

svg 패스를 이용해 수평선과 수직선을 그리는 것은 어렵지 않다.

시작점을 설정하고 H와 V에 각각 x좌표, y좌표를 설정하면 된다.

<svg>
	<path d="M 시작좌표(x,y) H 도착지x좌표 Z" />
	<path d="M 시작좌표(x,y) V 도착y좌표 Z" />
</svg>

위의 코드를 보면 간단하다.

시작좌표 M 에 좌표를 설정하고 각각 H 에는 x 좌표 V에는 y좌표를 설정하면 된다.

H는 Horizontal 수평의 약자이고, V는 Vertical 수직의 약자이다.

수평선 그리기

svg 패스를 이용해 수평선을 그려본다.

시작점 M의 x,y 좌표를 설정한 후 점이 이동하여 도작할 좌표인 H x좌표를 설정하면 된다.

<html>
    <body>

        <h1>SVG 경로 수평선 그리기</h1>

        <svg height="300" width="300" style="border:1px solid black;">

            <path d="M 100,150 H 200 Z" 
                stroke="#eb6e4c" fill="none" stroke-width="1" stroke-linecap="round" />

        </svg>
        
    </body>
</html>

시작좌표 100,150 인 위치에서 가로 직선인 수평선을 x좌표 200으로 점을 이동시킨 결과이다.

거듭 언급하지만, svg 패스는 점의 경로이다.

위의 코드는 내부적인 연산으로 점의 이동은 100에서 200으로 이동한 것을 선으로 그린 것이다.

수직선 그리기

svg 패스를 이용해 수직선을 그려본다.

시작점 M의 x,y 좌표를 설정한 후 점이 이동하여 도착할 좌표인 V y좌표를 설정하면 된다.

<html>
    <body>

        <h1>SVG 경로 수직선 그리기</h1>

        <svg height="300" width="300" style="border:1px solid black;">

            <path d="M 100,150 V 200 Z" 
                stroke="#eb6e4c" fill="none" stroke-width="1" stroke-linecap="round" />

        </svg>
        
    </body>
</html>

시작좌표 100,150인 위치에서 점은 수직으로 y좌표가 200으로 이동할 것이다.

점의 이동경로는 100,150 에서 100,200 으로 이동한 것을 선으로 표시한 것이다.

수평선 수직선 합치기

응용을 해 보도록 하자.

시작점의 위치는 100,150 이고 점을 이동시킨다.

점은 수평으로 200좌표로 움직인다. ( 200, 150 )

점은 수직으로 200좌표로 움직인다. ( 200, 200 )

점은 수평으로 100좌표로 움직인다. ( 100, 200 )

<html>
    <body>

        <h1>SVG 경로 수직선 그리기</h1>

        <svg height="300" width="300" style="border:1px solid black;">

            <path d="M 100,150 H 200 V 200 H 100 " 
                stroke="#eb6e4c" fill="none" stroke-width="1" stroke-linecap="round" />

        </svg>

    </body>
</html>

점이 이동한 경로가 직사각형으로 보이지만 순수하게 좌표대로 이동한 정도만 보인다.

인자값 Z를 빼면 패스를 닫지 않기 때문에 마지막에 선은 열려 있다.

인자값 Z를 사용하면 패스를 닫기 때문에 사각형처럼 보인다.

<html>
    <body>

        <h1>SVG 경로 그리기</h1>

        <svg height="300" width="300" style="border:1px solid black;">

            <path d="M 100,150 H 200 V 200 H 100 Z" 
                stroke="#eb6e4c" fill="none" stroke-width="1" stroke-linecap="round" />

        </svg>

    </body>
</html>

위의 결과 이미지와 비교를 해 보도록 한다.

Z 를 사용하고 사용하지 않고의 차이가 있음을 알면 편하다.

상대경로로 표현

위의 코드는 시작점과 이동한 좌표들이 절대좌표로 되어 있다.

그렇기에 도착할 좌표를 절대위치로 설정한 것이다.

만약, 절대좌표가 아닌 상대좌표를 적어주면 어떨까?

실제좌표가 아닌 얼마만큼 움직였는지를 작성하면 된다.

인자값은 같지만 소문자를 사용한다.

<html>
    <body>

        <h1>SVG 경로 그리기</h1>

        <svg height="300" width="300" style="border:1px solid black;">

            <path d="M 100,150 H 200 V 200 H 100 " 
                stroke="#eb6e4c" fill="none" stroke-width="1" stroke-linecap="round" />

        </svg>

        <svg height="300" width="300" style="border:1px solid black;">

            <path d="m 100,150 h 100 v 50 h -100 " 
                stroke="#eb6e4c" fill="none" stroke-width="1" stroke-linecap="round" />

        </svg>

    </body>
</html>

좌측은 절대좌표를 이용한 svg 패스이며, 우측은 상대좌표를 이용한 svg 패스이다.

svg 좌표에 대한 절대좌표와 상대좌표는 다음으로 미룬다.

코드를 보면 알겠지만 상대좌표를 사용하면 얼마만큼 이동했는지를 보여주며 + - 에 대한 방향성이 정해진다.

'programming > Graphics' 카테고리의 다른 글

svg path 패스 베지에곡선 이해 Quadratic Bézier Curve (0)	2021.09.16
svg path 패스 절대좌표 상대좌표 방향성 이해하기 (0)	2021.09.14
svg path 패스 직선 그리기 점의 이동경로를 직선으로 표현 draw svg line path (0)	2021.09.10
svg 경로 패스 개념 종류 About svg path (0)	2021.09.08
svg 꺾임선 폴리라인 그리기 Draw svg polyline (0)	2021.09.06

svg path 패스 수평선 수직선 그리기 draw svg Horizontal Vertical line path