본문 바로가기
Front-end/svg

svg 삼각형 그리기 <polygon>

by mooyou 2022. 2. 8.
728x90
300x250

<polygon>

polygon의 "poly"는 많다는 것을 뜻하고 "gon"은 각도를 의미

즉 다각형 최소한 세 면을 포함하는 도형을 만들 때 사용한다.

 

이 polygon을 이용하면 삼각형을 만들 수 있다.

<svg height="300" width="500">
  <polygon points="200,10 250,200 160,200" style="fill:#ACC7B4;stroke:#331B3F;stroke-width:1" />
</svg>

 

  • points 속성을 이용해서 각 꼭지점의 x,y축의 좌표를 지정해 준다.
728x90
반응형

'Front-end > svg' 카테고리의 다른 글

SVG 별모양 그리기 (+ fill-rule 속성)  (0) 2022.04.11
svg 캔버스 비교  (0) 2022.04.10
svg 선그리기  (0) 2022.02.04
svg 직사각형 <rect>  (0) 2022.02.01
SVG 타원 <ellipse>  (0) 2022.01.30

댓글