stroke-dasharray, stroke-dashoffset 속성

stroke-dasharray: 모양의 윤곽선을 그리는 데 사용되는 대시 및 간격의 패턴을 정의하는 프레젠테이션 속성

stroke-dashoffset: 관련된 stroke-dasharray의 렌더링 시작점에 대한 오프셋을 정의하는 프레젠테이션 속성

 

원의 경우 선(dash)의 시작점은 시계방향 90도 지점이다. 만약 원의 지름의 1/2 값을 stroke-dasharray에 지정할 경우 원의 둘레가 1/2만 그려진다.

 

참고로 dash는 여러 뜻이 있지만 수평선의 뜻을 가지고 있기도 하다.

 

사용 예제: codepen.io/hwanlee/pen/QWKBegG

stroke dasharray, stroke dashoffset

참고

- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

- steadev.tistory.com/43

- www.englishclub.com/writing/punctuation-dash.htm