사각형이나 라운드 사각형, 원 같은 경우는 레이어와 CSS로 얼마든지 표현할 수 있지만, 좀 더 복잡한 도형의 경우에는 CSS로는 표현하기가 어렵습니다. 그래서 SVG를 사용하는 방법을 찾던 중, 아크를 그리는데 어려움이 있어서 샘플로 만들어 봤습니다.
우선 데모를 보시죠.
Path 객체를 사용해서 원하는 모양의 아크를 만들려니 계산식이 복잡해 지더군요. 그래서 중심좌표, 반지름 및 각도를 가지고 아크를 그릴 수 있도록 공식을 짜 봤습니다.
시작점의 위치는 12시 방향으로 고정해서 잡고, 끝점의 좌표를 계산하여 시계 반대방향으로 아크를 그리도록 했습니다. 시계방향으로 그리거나, 시작점과 끝점을 제어하도록 하는 부분은 위 샘플을 응용하면 될 것 같네요.
물론 쉽게 사용할 수 있는 공개된 소스들도 많이 있지만, 개념을 이해하는 차원에서…