Snap.svg 입문

Snap.소위svg

먼저, 명칭과 같이SVG(Scalable Vector Graphics) 벡터 형식의 이미지 형식으로 확대되어도 예쁘게 표시되는 특징이 있다.
(다른 한편, 비트맵과 같은 울타리 형식에서는 사진과 같은 색의 점차적인 변화 등이 비교적 강하다)
내부 형식은 XML을 바탕으로 하고 코드 자체는 HTML과 비슷하지만 HTML은 CSS에서 디자인하고 SVG는 이미지 자체이기 때문에 기본적으로 디자인적인 것도 속성 속성에 의해 지정된다.
W3C가 제정, 표준화되었기 때문에 당연히DOM API 허가SVG API를 제공했지만 HTML와 달리 각 탭의 속성 속성 속성 등이 더욱 복잡해졌고 이를 흡수하기 위해 jQueryRic의 래퍼 라이브러리, 스냅으로 사용했다.svg가 있습니다.

SVG Element의 패키지 객체인 Paper

HTML 글에는 반드시 HTML 요소가 있고 헤드 요소, 바디 요소 등이 없는 경우에도 자동으로 생성된다.
다른 한편, SVG가 반드시 존재하는 것은 아니다.따라서 SVG 요소 자체를 만들 필요가 있다.
예를 들어 아래에서 이렇게 하면 부모 요소에 명확하게 걸려 있다.(걸지 않으면 연결 불가)
makePaper.js

function makePaper(elem){
   const width=elem.clientWidth, height=elem.clientHeight;
   const paper=Snap(width, height);
   paper.appendTo(elem);
   return paper;
}

width와 height도 스스로 설정할 수 있다.
물론 Snap(selector와Snap(svgelement)처럼 글에 SVG 라벨을 미리 준비해서 사용할 수도 있다.

그룹 요소

페이퍼 대상과 같은 하위 요소를 만들 수 있는 대상으로는 g(roup) 요소가 있다.
이것은 paper.g()처럼 제작할 수 있습니다.

그림자 생성

makeShapes.js

const rect2    = paper.rect(x, y, width, height, rx, ry); //端が丸められる

const line     = paper.line(x0, y0, x1, y1);
const polyline = paper.polyline(x0, y0, ...., xn, yn);
// const polyline = paper.polyline([x0, y0, ..., xn, yn]); でもOK
const polygon  = paper.polygon(x0, y0, ...., xn, yn);

const circle   = paper.circle(x, y, r);
const ellipse  = paper.ellipse(x, y,rx, ry); //楕円

const text     = paper.text(x, y, "content");

이렇게 하면 SVG의 각 라벨 요소를 제작할 수 있다.이러한 반환값은 SVGElement의 잠금 대상(node이 구성원 변수에 요소를 가진 대상)이다.
이 대상은 .attr() 방법을 통해 속성 값을 변경할 수 있다.이것은 jQuery와 마찬가지로 대상 자체를 되돌려주는 방법 체인입니다

const rect = paper.rect(x, y, width, height).attr({ stroke: "red", strokeWidth: 3, fill: "Orange" });

처럼 가능합니다.
더 통용되는path 대상도 존재한다.

문자 위치를 나타내는 속성 값

텍스트 위치를 나타내는 속성 값 textAnchor'(横方向)と 으로dominantBaseline (세로) 이 있습니다.

textAnchor: start 오른쪽(시작)에서 점

textAnchor: middle 중앙 구성

textAnchor: end 가운데 왼쪽(끝)은 점

dominatBaseline: hanging 아래에 매달려 있다.

dominatBaseline: middle 중앙 구성

dominatBaseline: ideographic에 접속합니다.

되다기본적으로 textAnchor: start 세로로 영어로 표시된 일반 기선, 즉 pqg 등 아래로 이동합니다.
textAttr.js

    const hline=paper.line(x, y+0.5*dy, x+dx, y+0.5*dy).attr({ stroke: 'black' });
    const vline=paper.line(x+0.5*dx, y, x+0.5*dx, y+dy).attr({ stroke: 'black' });
    const bline=paper.line(x+0.5*dx, y+1.2*dy, x+dx, y+1.2*dy).attr({ stroke: 'red' });

    const text11=paper.text(x,        y,        'start & hanging' ).attr({ textAnchor: "start",  dominantBaseline: "hanging"});
    const text12=paper.text(x+0.5*dx, y,        'middle & hanging').attr({ textAnchor: "middle", dominantBaseline: "hanging"});
    const text13=paper.text(x+dx,     y,        'end & hanging'   ).attr({ textAnchor: "end",    dominantBaseline: "hanging"});
    const text21=paper.text(x,        y+0.5*dy,  'start & middle' ).attr({ textAnchor: "start",  dominantBaseline: "middle"});
    const text22=paper.text(x+0.5*dx, y+0.5*dy,  'middle & middle').attr({ textAnchor: "middle", dominantBaseline: "middle"});
    const text23=paper.text(x+dx,     y+0.5*dy,  'end & middle'   ).attr({ textAnchor: "end",    dominantBaseline: "middle"});
    const text31=paper.text(x,        y+dy, 'start & ideographic' ).attr({ textAnchor: "start",  dominantBaseline: "ideographic"});
    const text32=paper.text(x+0.5*dx, y+dy, 'middle & ideographic').attr({ textAnchor: "middle", dominantBaseline: "ideographic"});
    const text33=paper.text(x+dx,     y+dy, 'end & ideographic'   ).attr({ textAnchor: "end",    dominantBaseline: "ideographic"});

    const defaultText=paper.text(x+0.5*dx, y+1.2*dy, "Default pqg");

이런 코드로.

이렇게 된 그림입니다.(x, y, dx,dy 적당히 조절)
나는 이런 속성 값을 별로 보지 않기 때문에 기억하는 것이 매우 편리할 것이다.

속성치,width,height 등 획득

이는 스냅의 시도라기보다는 SVGElemnt 자체의 규격이지만, 이러한 취득은 SVGElement[property].animVal.value 같은 방법으로 이뤄졌다.(참조: animVal(MDN

좌표계 정보

SVG에만 국한된 것이 아니라 웹계의 좌표계는 왼쪽 위 구석을 원점으로 하고 오른쪽 아래 구석으로 갈수록 x, y가 증가한다.
일반 수학과의 좌표계가 오른쪽 위 x, y가 증가하는 방향이기 때문에 이에 상응하는 혼란이 생길 수 있으므로 잘 이해해야 한다.
또한 표의 단위는 기본적으로 px이기 때문에 100% 사용할 수 없기 때문에 도표 등을 사용할 때 적당히 한 번 변환해야 한다.

일단 끝냅시다.

이미지학과라서 HTML 설정 항목보다 다양한 게 있는데 일단 이런 게 있으면 뭐라도 할 수 있을 것 같아요.
나는 Snap.svg 사용 방법 요약 - Xdomain 서버 초기 페이지 대체 기준이 유용하다고 생각한다.
또 SVG계의 공장 표준D3.js도 유명하다.그래프(데이터 표시 특화형)인데 SVG 자체를 배우기에는 적절하지 않다고 생각해 손을 대지 않았다.
이 스냅.svg는 SVG의 각종 이미지 시스템 라이브러리를 사용한 토대에서 사용하면 더욱 좋을 수 있습니다.