7. 아날로그 시계 - SVG II

SVG로 구현하기 전에

간단한 사용법을 익히고 진행한다.

여기에서 정리한 사용법에 맞추어

몇 가지 코드만 바꾸어 주면

Canvas를 SVG로 간단하게 구현할 수 있다.

<svg id="clock" style="width:400px; height:400px"></svg> <script> var clock = document.getElementById('clock'); var center = parseInt(clock.style.height) / 2; var radius = center * 0.90; drawClock(); function drawClock() { drawFace(radius); } function drawFace(radius) { var circle = document.createElementNS('http://www.w3.org/2000/svg','circle'); clock.appendChild(circle); circle.setAttribute("cx", center); circle.setAttribute("cy", center); circle.setAttribute("r", radius); circle.setAttribute('fill','white'); circle.setAttribute('stroke-width','2px'); circle.setAttribute('stroke','#000'); } </script>

clock2.html

위 코드 1라인에서

Canvas대신 SVG 태그를 생성하여 사용한다.

이 SVG태그를 getElementById로 찾아서

clock 변수에 담아서 자바 스크립트(JS)로 제어한다 [라인2].

Canvas에서는 도형들을 그렸지만

SVG에서는 도형이라는 HTML 태그를 생성한다.

따라서

시계의 틀(face)을 그리기 위해 큰 원(Circle)을

하나 생성하였다 [라인 15].

JS에서는 동적으로 태그를 생성할 때 createElement를 사용하지만

SVG는 도형을 동적으로 생성할 때 createElementNS를 사용한다.

생성 후에 appendChild를 이용하여 부모를 지정해 준다.

부모를 지정하지 않으면 웹 페이지에 표시 되지 않는다 [라인 16].

마지막으로 원의 속성(setAttribute)들을 지정한다.

다음 코드는 Canvas에서 사용한 코드로

시계 테두리에 그라데이션 준 것을

SVG에서는 선(원)으로 바꾸어 작성하였다.

  ctx.beginPath();
  ctx.arc(center, center, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(center,center,radius*0.95, center,center,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();

Canvas에서는 함수의 파라미터나

Canvas 속성을 이용하여

그리고자 하는 도형의 다양한 속성(색, 크기 등)을 지정하였다.

SVG에서는 속성으로 지정한 차이를 볼 수 있다 [라인 17~].

다음 그림은 Canvas를 사용했을때의 DOM 탐색기의 모습이다.

시계가 작동되고 있지만

Canvas 태그 하위에 아무것도 없는 것을 볼 수 있다.

다음 그림은 SVG를 사용하여

이상의 예제를 실행했을 때의 DOM 탐색기의 모습이다.

SVG 태그 하위에 원(circle) 태그가 생성된 것을 볼 수 있다.

즉, Canvas는

Canvas에 다양한 도형을 그리는 것이기 때문에

하위에 아무 것도 없다.

SVG는 다양한 도형을 태그로 생성하여 표현하는

차이를 확인할 수 있다.

이상의 코드는 몇 가지 문제가 있다.

먼저, 하나의 도형을 구현하는데 너무 많은 코드가 작성되었다.

작성할 코드가 많다는 건 일하는 시간이 많다는 의미이자

문제(버그)가 생길 가능성이 높다는 의미도 된다.

두 번째로 SVG는 HTML 태그를 이용하여 구현하기 때문에

CSS를 사용할 수 있는데 이용하지 않았다.

Canvas는 JS만 이용하여 작업하기 때문에

디자이너가 수정하기 어렵다.

CSS를 이용할 수 있다는 것은

디자인 관련 작업을 웹 디자이너나 퍼블리셔의 영역으로

넘길 수 있다는 것을 의미한다.

개발도 쉽게 할 수 있다.

이 두 가지 문제를 해결하는 방법은

다음 코드와 같이 함수화 하고,

CSS로 구현하면 된다.

<style> .face { fill : #FFF; stroke-width: 2px; stroke: #000; } </style> <svg id="clock" style="width:400px; height:400px"></svg> <script> var clock = document.getElementById('clock'); var center = parseInt(clock.style.height) / 2; var radius = center * 0.90; drawClock(); function drawClock() { drawFace(radius); } function drawFace(radius) { var circle = createElement('circle', clock, {"cx": center, "cy": center, "r": radius, "class": "face"}); } function createElement(eleType, parent, attributes) { var ele = document.createElementNS('http://www.w3.org/2000/svg', eleType); parent.appendChild(ele); for (var item in attributes) ele.setAttribute(item, attributes[item]); return ele; } </script>

clock3.html

먼저, 기본적으로 하나의 도형은

생성하고

부모를 지정하고

속성을 부여하여 사용한다.

따라서

무엇을 생성 할지 (eleType),

누가 부모인지(parent) 알려 주면 된다.

사용될 속성과 개수는 도형에 따라 다르지만

속성 이름(cx, cy 등)과 값의 구조를 가지는

Json을 이용하면 쉽게 처리 할 수 있다.

즉, createElement란 함수를 생성하고

파라미터로 도형종류, 부모, 속성을 지정하면

다양한 도형을 한 줄로 생성하여 사용할 수 있다.

다음으로 사용된 속성들은 2가지로 나눌 수 있다.

fill, stroke-width, stroke과 같이 고정된 값을 가지는 속성과

cx, cy, r과 같이

상황에 따라 바뀌는 값을 가지는 속성으로 나눌 수 있다.

고정된 값을 가지는 속성은 CSS의 클래스(face)로 처리하고 [라인 2]

바뀌는 값은 setAttribute으로 지정해 준다 [라인 23].