Snap.svg (포스팅 테스트 중!)

Snap.svg

평소 공부해야지 아미루고미루던 SVG!
를 웹 애니메이션에 써먹어 보고 싶기 때문에,
이번 포스트는 Snap.svg에 대한 탐구입니다 :-9

---

왜 라이브러리를 쓸까?

SVGDOM은 SVG문서를 프로그램으로 조작하기 위한 api를 규정한 것입니다. HTML5를 지원하는 브라우저라면 이 SVGDOM을 지원하고 있으므로, JS를 가지고 SVG 그래픽을 그릴 수 있습니다....만.

굳이 왜 라이브러리를 쓰냐 하면은, 너무 복잡하거든요.
예를 들어, 직접 SVGDOM을 조작하려면 10줄이나 되는 코드를 써야 하는데, Snap.svg를 통하면 1줄이면 됩니다.

또한 다른 라이브러리와 비교하면 Snap.svg는 좀 더 쉽게 SVG를 다룰 수 있다고 합니다.
아무튼 유지보수 측면도 있고 (귀찮기도 하고) 해서 Snap.svg를 쓰면 좋겠습니다 :>

아, 물론 장점만 있는 건 아닙니다. 아무래도 SVGDOM을 직접 조작하는 것보다는 퍼포먼스가 낮아서, 속도가 우선시 된다면 고민해봐야겠죠. IE8 이하의 브라우저와 Android2.x 버전도 지원하지 않습니다.

---

Snap.svg의 구조

Snap.svg는 SVGDOM을 감싸는 여러 오브젝트(객체)로 구성되어 있습니다. 이 글의 원문에서는 각 객체별 역할을 다음과 같이 구분하고 있습니다.

• Snap 오브젝트

  Snap.svg의 네임스페이스를 표시하고, 다양한 유틸리티 기능을 제공합니다.

• Paper 오브젝트

  그래픽 본체에 해당하는 오브젝트. 각종 도형을 그리기 위한 기능을 제공합니다. 또한 Paper 오브젝트는 Element 오브젝트이기도 하며, SVG요소에 대응합니다.

• Element 오브젝트

  SVG의 각종요소에 대응하는 오브젝트. SVGDOM을 조작하기 위한 여러 기능을 제공합니다.

• Set 오브젝트

  Element의 집합에 해당합니다. 스타일의 일괄 설정, 반복 처리 등을 관리합니다.

• Fragment 오브젝트

  SVG 그래픽의 일부분을 나타내는 오브젝트. XMLDOM의 documentFragment객체에 해당합니다.

• Matrix 오브젝트

  좌표 변환에 쓰는 행렬에 해당하는 오브젝트입니다. 행렬조작과 관련된 각종 기능을 제공합니다.

• Animation 오브젝트

  애니메이션 설정을 표시하는 오브젝트입니다.

• mina/anim 오브젝트

  Animation 오브젝트의 설정을 바탕으로 애니메이션을 처리합니다.

• eve 오브젝트

  Snap.svg 자체의 이벤트 트리거입니다.

이 중에서 Snap, eve, mina 3가지는 전역 변수로 등록되므로, 다른 js 라이브러리와 이름이 겹치지 않도록 주의합시다.

---

Snap.svg의 그래픽 처리 방법

1. 스크립트의 실행 트리거를 정합니다.

   어떤 이벤트에 대해 그래픽 처리를 등록합니다. 예를 들면 다음 이벤트들을 트리거로 정할 수 있겠네요.

   • window의 onload 이벤트 window.onload = function(){};

     가장 널리 쓰는 타이밍이고, 안정적입니다. 대신 작동 성능이 떨어지며, 아래 DOMContentLoaded이벤트를 더 추천합니다.

   • document의 DOMConentLoaded 이벤트document.addEventListener("DOMContentLoaded",function(){},false);

     DOM해석이 완료된 타이밍입니다. window.onload 보다는 조금 더 동작이 빠릅니다.

   • click 이벤트 등 button.onclick = function(){};

     버튼을 눌렀을 때 등, 임의의 타이밍에 처리를 실행합니다. 모든 처리를 이때 해도 되지만, 이벤트 발생 빈도가 높은 경우에는 사전에 일부 처리하는 방법도 있습니다.

   • 스크립트 요소의 로드 타이밍

     이 경우에는 반드시 Snap.svg를 먼저 읽고, 자신의 스크립트가 실행되도록 해야 합니다. DOM해석이 완료되지 않은 상태에서 실행되므로 일부 제약이 발생합니다.

2. Paper 오브젝트를 취득합니다.

   위에서 등록한 함수 내부에서 Paper 오브젝트를 취득합니다. 이후 이 Paper 오브젝트에 대해서 그래픽을 추가해 나갑니다.

3. 그래픽 처리/외부 그래픽 읽어오기

   Snap.svg가 갖는 api를 바탕으로 그래픽을 정의하고 그려냅니다.

---

Paper 오브젝트의 취득

Snap(width, height)

새롭게 SVG 그래픽을 생성하는 경우에 사용합니다.

Snap(selector)

인수로 받은 오브젝트를 Paper 오브젝트로 감싸서 리턴합니다. iframe이나 object 요소 내부의 HTML/SVG 문서를 조작하는 경우 사용합니다.

---

Paper 오브젝트의 특징

Paper 오브젝트는 svg 요소에 대응하는 것으로, 후술할 Element 객체이기도 합니다. 특징은 다음과 같습니다.

• 그래픽을 그리기 위한 메서드를 제공합니다.
• Paper 오브젝트를 중첩할 수 있습니다.
• viewBox 프로퍼티에 따른 그래픽 묘화단위를 정의합니다.
• Element 오브젝트의 메서드 일부에 무효가 되는 경우가 있습니다.
• 가장 외측의 Paper 오브젝트에서는 HTML의 스타일이 유효가 됩니다.

---

Paper 오브젝트와 비슷한 Element 오브젝트

Element 오브젝트에는 다음과 같은 것이 있으며, svg에서는 콘테이너 요소에 해당합니다.

• svg 요소에 대응하는 Element 오브젝트
• g 요소에 대응하는 Element 오브젝트
• pattern 요소에 대응하는 Element 오브젝트
• mask 요소에 대응하는 Element 오브젝트

이들은 기본적으로 Paper 오브젝트가 제공하고 있는 api를 자유롭게 호출할 수 있습니다.

Snap.svg에서는 이들 오브젝트를 생성할 때, api를 복사함으로써 Paper 오브젝트로서의 행동을 추가로 정의하고 있습니다.

이론적인 이야기는 여기까지 하고, 이제 api를 살펴봅시다!

---

Paper 오브젝트의 묘화 기본

Paper 오브젝트는 SVG에 있어서 svg요소에 해당하며, 기본적인 도형을 그려내는 기능을 가지고 있습니다.

기본도형의 묘화

Paper 오브젝트를 사용해 원이나 사각형 등의 기본적인 도형을 그릴 수 있습니다. 실행시키면 Element 오브젝트를 리턴합니다.

• Paper.circle(cx, cy, r)

  window.onload = function(){
    var container = document.querySelector("#container");
  
    var paper = Snap(300,300).remove();
    paper.circle(150,150,100).attr({fill:"#fa8072"});
  
    paper.prependTo(container);
  }
        

• Paper.rect(x, y, width, height, rx, ry)

  window.onload = function(){
    var container = document.querySelector("#container");
    
    var paper = Snap(300,300).remove();
    paper.rect(50,50,200,200).attr({fill:"#2c3baa"});
    
    paper.prependTo(container);
  }