svg이미지 활용

필수요소

<svg viewbox="가로위치 세로위치 가로비율 세로비율">

<path d="">

 

 

stroke-linejoin (선이 꺽이는 부분 모양처리)

- miter: 직각으로 꺽음 (기본값)

- round: 모서리를 둥글게

- bevel: 두번 꺽어서 완만하게 꺽음

 

stroke-dasharray

- 선에 빈 공간을 생성

- 수치값을 늘릴수록 빈 공간은 늘어남

- 빈공간 크기와 비례해서 선이 그려지는 영역도 같이 늘어남

 

stroke-linecap (선이 짤린 단면의 모양처리)

- butt: 직각으로 자름

- square: stroke-width크기만큼 여백을 줘서 자름 (기본값)

- round: 둥글게 자름