개발/HTML-CSS
stroke-dasharray, stroke-dashoffset 속성
환리
2021. 1. 10. 16:00
stroke-dasharray: 모양의 윤곽선을 그리는 데 사용되는 대시 및 간격의 패턴을 정의하는 프레젠테이션 속성
stroke-dashoffset: 관련된 stroke-dasharray의 렌더링 시작점에 대한 오프셋을 정의하는 프레젠테이션 속성
원의 경우 선(dash)의 시작점은 시계방향 90도 지점이다. 만약 원의 지름의 1/2 값을 stroke-dasharray에 지정할 경우 원의 둘레가 1/2만 그려진다.
참고로 dash는 여러 뜻이 있지만 수평선의 뜻을 가지고 있기도 하다.
사용 예제: codepen.io/hwanlee/pen/QWKBegG
stroke dasharray, stroke dashoffset
...
codepen.io
참고
- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset