svg 다각형 폴리곤 그리기 draw svg polygon

svg를 이용하여 다각형을 그리기 위해선 폴리곤 polygon 태그를 사용한다. 다각형에 대한 점을 지정하면 다각형을 그릴 수 있는데 points 속성에 좌표를 적어주면 된다. 마지막에 지정한 점은 가장 처음에 지정한 점과 연결되는 속성을 가진다.

svg 다각형 폴리곤 그리기
draw svg polygon

svg를 이용해 다격형인 폴리곤을 그리는 것은 어렵지 않다.

svg 태그 내에 polygon 태그를 사용하면 된다.

아래는 기본형태이다.

<svg>
	<polygon/>
</svg>

속성은 다각형을 그려보면서 익히면 된다.

삼각형을 그려보자.

삼각형 또한 다각형이기도 하다.

<html>
    <body>

        <h1>SVG 다각형 그리기</h1>

        <svg height="300" width="300" style="border:1px solid black;">
            <polygon points="150,50 200,230 110,250" 
            		 style="fill:lime; stroke:purple; stroke-width:1" />
        </svg>

    </body>
</html>

여기서 주목할 것은 points 속성이다.

svg 영역인 300, 300 내에 좌표를 점으로 설정해 주었다.

좌표만 찍어주면 svg 태그는 순차적으로 선을 그리고, 마지막 점은 가장 처음의 점과 선으로 연결한다.

아래는 위의 좌표로 그린 svg 다각형이다.

점을 늘려보자.

중간에 점을 늘리면 이것 또한 선으로 연결하려는 폴리곤 특성을 보인다.

<html>
    <body>

        <h1>SVG 다각형 그리기</h1>

        <svg height="300" width="300" style="border:1px solid black;">
            <polygon points="150,30 230,230 100,270 53,254" 
            		 style="fill:lime; stroke:purple; stroke-width:1" />
        </svg>

    </body>
</html>

삼각형에서 점이 하나 추가되었다.

점이 추가됨으로써 선도 추가되어 형태가 삐뚤어진 다각형이 그려진 것을 알 수 있다.

별을 그려본다.

순차적으로 5개의 좌표를 적어주면 별을 그릴 수 있다.

<html>
    <body>

        <h1>SVG 다각형 그리기</h1>

        <svg height="300" width="300" style="border:1px solid black;">
            <polygon points="150,50 90,238 240,118 50,118 210,238"
                     style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
        </svg>

    </body>
</html>

별을 그리는 선의 색과 굵기는 일단 넘어가자

중요한 것은 별을 그리는 points 속성에 적힌 좌표들이 중요하다.

x,y 좌표 형식으로 점을 찍고 선으로 연결되고 있음을 알 수 있다.

별이 그려지는 과정을 하나씩 점으로 찍어보면서 확인해 보면 금방 알 수 있다.

<html>
    <body>

        <h1>SVG 다각형 그리기</h1>

        <svg height="300" width="300" style="border:1px solid black;">
            <polygon points="150,50"
                        style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
        </svg>

        <svg height="300" width="300" style="border:1px solid black;">
            <polygon points="150,50 90,238"
                        style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
        </svg>

        <svg height="300" width="300" style="border:1px solid black;">
            <polygon points="150,50 90,238 240,118"
                        style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
        </svg>

        <svg height="300" width="300" style="border:1px solid black;">
            <polygon points="150,50 90,238 240,118 50,118"
                        style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
        </svg>

        <svg height="300" width="300" style="border:1px solid black;">
            <polygon points="150,50 90,238 240,118 50,118 210,238"
                        style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
        </svg>

    </body>
</html>

위의 코드를 보면 points 속성의 좌표가 하나씩 늘어나고 있다.

점을 지정하고 선이 연결되며 별이 그려지는 단계를 표시하기 위해 좌표를 하나씩 추가하였다.

점을 하나찍으면 polygon 태그는 점만 찍기에 동작을 하지 않는 것처럼 보인다.

점이 하나씩 추가될수록 별의 모양에 가까워 지는 것을 알 수 있다.

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

svg 경로 패스 개념 종류 About svg path (0)	2021.09.08
svg 꺾임선 폴리라인 그리기 Draw svg polyline (0)	2021.09.06
svg 선 그리기 draw svg line (0)	2021.09.04
svg 타원 그리기 draw svg eclipse (0)	2021.09.02
svg 사각형 그리기 draw rectangle (0)	2021.08.31