이 기사의 내용

Snap.svg를 처음 사용해 보았을 때의 비망록, 튜토리얼로 이해하기 어려웠던 점 등.

설치

공식에서 다운로드, 압축 해제, html 파일

index.html

    <script src="lib/Snap.svg-0.5.1/dist/snap.svg.js"></script>

로 로드. npm에서도 설치할 수 있지만 버전이 낡은, webpack의 빌드에 문제가 있는 것 같기 때문에 낡은 이 스타일이 결국 제일 라크같다.

톱 노드 (Paper) 설정

튜토리얼에서는 SVG 요소를 생성하는 방법, 셀렉터로 설정하는 방법, svgsvgelement를 사용하는 방법이 있지만 여기에서는 최초의 방법을 취한다.

init_svg.js

function init_svg(){
    const can=document.getElementById('canvas');
    const w=can.clientWidth;
    const h=can.clientHeight;
    const paper=Snap(w, h).remove();
    paper.appendTo(can);
}

부모 요소를 가져와 그 폭과 높이를 SVG 요소에 세트 그것을 부모 요소에 설정합니다. 마지막 appendTo는 인수 측에 paper 요소를 자식 요소로 설정합니다. 두 번째 방법을 사용하면 크기를 잘 설정할 수 없습니다. 성공하면 위가 아래로 된다.

<div id="canvavs"></div>

<div id="canvavs">
   <svg ~~~~>
      <desc>Created with Snap</desc>
      <defs></defs>
   </svg>
</div>

된다. <defs> 요소는 재사용 가능한 객체를 정의하기위한 것으로 Snap이 아닌 SVG 자체의 표준으로 정의됩니다. defs-MDN

선 묘사와 좌표계

init_svg.js

    paper.line(0.1*w, 0.8*h, 0.95*w, 0.8*h).attr( { stroke:'black', strokeWidth: 2} );
    paper.line(0.1*w, 0.8*h, 0.1*w, 0.05*h).attr( { stroke:'black', strokeWidth: 2} );

완성된 HP는


이런 외부 프레임은 SVG 전체를 둘러싸고 있는 박스이다. 조심스럽게 보면 알 수 있지만 좌표계는 오른쪽 위가 (0,0)이고 왼쪽 아래가 (x, x) 인 일반 좌표 설정 (오른쪽 아래가 (0,0)이고 왼쪽 위가 (x, x)) 다르기 때문에 주의가 필요하다.

후기

뭐 원형을 봐 주시면 다음에 하고 싶은 것이 보인다고 생각합니다만 우선 여기에서 조입니다.

Snap은 Paper(톱 노드)를 만드는 것이 힘들다.

좌표계가 이상합니다.

defs라고 하는 이상한 노드가 만들어진다. (혹은 손으로 SVG를 쓸 때는 아마 여기를 사용하면 행복해질 수 있습니다)