[SVG] <polygon>

<polygon>

<polygon> 요소는 SVG 기본 모양으로 다각형을 그릴 때 사용합니다.

<polygon>

<polygon> 요소는 다각형을 그립니다.

정의(Definition)

<polygon> 요소는 다각형을 그릴 때 사용합니다.
<polygon> 요소는 직선 세그먼트로 구성된 닫힌 모양을 설정합니다. 첫 번재 점과 끝 점이 연결되어 있습니다.

속성(Property)

속성	설명
points	다각형에 필요한 점(x축, y축)의 좌표값을 설정합니다.

1. 폴리건

SVG를 이용한 폴리건 모양입니다.

Sample1

HTML

<div class="svgBox">
<svg class="svg">
    <polygon class="polygon1" points="120,142 9,93 107,22" ></polygon>
</svg>
<svg class="svg">
    <polygon class="polygon2" points="130,140 48,149 13,74 74,18 146,58"></polygon>
</svg>
<svg class="svg">
    <polygon class="polygon3" points="130,128 65,148 15,102 30,36 95,16 145,62"></polygon>
</svg>
<svg class="svg">
    <polygon class="polygon4" points="134,134 88,117 48,145 49,97 10,68 57,54 72,8 100,48 149,48 119,87"></polygon>
</svg>
</div>

CSS

.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
.polygon1 {fill: #f48fb1;}
.polygon2 {fill: #f48fb1;}
.polygon3 {fill: #f48fb1;}
.polygon4 {fill: #f48fb1;}

TOTAL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG</title>
    <style>
    .svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
    .polygon1 {
        fill: #f48fb1;
    }
    .polygon2 {
        fill: #f48fb1; 
    }
    .polygon3 {
        fill: #f48fb1; 
    }
    .polygon4 {
        fill: #f48fb1; 
    }
    </style>
</head>
<body>
    <div class="svgBox">
        <svg class="svg">
            <polygon class="polygon1" points="120,142 9,93 107,22" ></polygon>
        </svg>
        <svg class="svg">
            <polygon class="polygon2" points="130,140 48,149 13,74 74,18 146,58"></polygon>
        </svg>
        <svg class="svg">
            <polygon class="polygon3" points="130,128 65,148 15,102 30,36 95,16 145,62"></polygon>
        </svg>
        <svg class="svg">
            <polygon class="polygon4" points="134,134 88,117 48,145 49,97 10,68 57,54 72,8 100,48 149,48 119,87"></polygon>
        </svg>
    </div>
</body>
</html>

호환성(Compatibility) 더보기 caniuse.com

						6	7	8	9	10	11
<polygon>	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능