CSS - Stroke

CSS 의 stroke속성은 SVG 모양에 테두리를 추가하기 위해서다.

 

fill: SVG 모양의 색상을 설정  

stroke-width:  SVG 모양의 테두리 너비를 설정

stroke-dasharray: SVG 모양의 획에 대시를 만들기 위한 설정. 숫자가 높을수록 넓어진다.

stroke-dashoffset: 대시가 시작되는 위치 설정

stroke-linecap: 대시 끝 단면도의 모양을 설정

• butt(기본값): 날카로운 90도 각도로 스트로크를 끝냅니다.
• square: butt경로의 길이를 넘어 스트로크를 확장한다는 점을 제외하고는 유사합니다.
• round: 시작점과 끝점을 매끄럽게 하는 반경을 추가합니다.

.css-stroke {
    fill: none;
    stroke: black;
    stroke-width: 10;
    stroke-dasharray: 10;
    stroke-dashoffset: 360;
    stroke-linecap: round;
}