제13장. Animation

제16장. 스크립트를 이용한 SVG의 생성

원그리기 및 생성/삭제하기

<svg width="240" height="80" onload="make_shape(evt)">

  <circle cx="80" cy="40" r="30" style="fill:red"
                onclick="change_color(evt)" />
  <circle cx="155" cy="40" r="30" fill="blue"
                onclick="add_shape(evt)" />

  <script><![CDATA[
    function make_shape(evt) {
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var SVGRoot = SVGDoc.getDocumentElement();
        var shape, style;
        shape = SVGDoc.createElement("circle");
        shape.setAttribute("cx", 25);
        shape.setAttribute("cy", 25);
        shape.setAttribute("r", 20);
        style = shape.getStyle()
        style.setProperty("fill", "green");
        SVGRoot.appendChild(shape);
    }
    function change_color(evt) {
        var circle2 = evt.getTarget();
        var style = circle2.getStyle();
        var color = style.getPropertyValue("fill");
        if (color == "red") style.setProperty("fill", "magenta");
        else    style.setProperty("fill", "red");
    }
    function add_shape(evt) {
        var circle3 = evt.getTarget();
        var color = circle3.getAttribute("fill");
        if (color == "blue") circle3.setAttribute("fill", "cyan");
        else   circle3.setAttribute("fill", "blue");
        if (color == "blue") {
            var SVGDoc = evt.getTarget().getOwnerDocument();
            var SVGRoot = SVGDoc.getDocumentElement();
            var shape = SVGDoc.createElement("circle");
            shape.setAttribute("id", "circle4");
            shape.setAttribute("cx", 210);
            shape.setAttribute("cy", 25);
            shape.setAttribute("r", 20);
            shape.setAttribute("fill", "blue");
            SVGRoot.appendChild(shape);
        }
        else {
            var SVGDoc = evt.getTarget().getOwnerDocument();
            var shape = SVGDoc.getElementById("circle4");
            var parent = shape.parentNode;
            parent.removeChild(shape);
        }
    }
  ]]></script>
</svg>

페이지 로드시 실행

빨간색 원 (두번째)

파란색 원 (세번째)

녹색 원을 스크립트로 생성
(첫번째 원)
- 페이지 로드시 호출

색상 바꾸기
(두 번째 원에서 호출)

red <=> magenta

원 추가하기
(세 번째 원에서 호출)

- 색상도 바꾸기
(blue <=> cyan)

-blue이면 원을 새로 생성
(id를 "circle4"로 설정)

-cyan이면 네번째 원을 삭제
(id가 "circle4"인 요소 삭제)

다양한 도형 생성하기

<svg width="200" height="100">
  <script><![CDATA[
    var textNode = null;
    var shape = null;
    function change_text(evt) {
        if (textNode != null) {
            textNode.setAttribute("fill", "blue");
            var parent = shape.parentNode;
            parent.removeChild(shape);
        }
        textNode = evt.getTarget();
        textNode.setAttribute("fill", "red"); // 신규
    }
    function add_rect(evt) {
        change_text(evt)
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var SVGRoot = SVGDoc.getDocumentElement();
        shape = SVGDoc.createElement("rect");
        shape.setAttribute("x", 20);
        shape.setAttribute("y", 20);
        shape.setAttribute("width",60);
        shape.setAttribute("height", 60);
        shape.setAttribute("fill", "yellow");
        shape.setAttribute("stroke", "magenta");
        SVGRoot.appendChild(shape);
    }
    function add_line(evt) {
        ...
        shape = SVGDoc.createElement("line");
        shape.setAttribute("x1", 20);
        ...
    }
    function add_polygon(evt) {
        change_text(evt)
        ...
        shape = SVGDoc.createElement("polygon");
        shape.setAttribute("points", "20,20 80,80, 20,80 80,20");
        shape.setAttribute("fill", "cyan");
        shape.setAttribute("stroke", "magenta");
        SVGRoot.appendChild(shape);
    }
    function add_path(evt) {
        ...
        shape = SVGDoc.createElement("path");
        shape.setAttribute("d", "M20,20 C20,80 80,80, 80,20");
        shape.setAttribute("fill", "pink");
        ...
    }
  ]]></script>

  <text x="100" y="20" style="font-size:16; font-family:Verdana"
      fill="blue" onclick="add_rect(evt)" > rectangle </text>
  <text x="100" y="40" style="font-size:16; font-family:Verdana"
       fill="blue" onclick="add_line(evt)" > line </text>
  <text x="100" y="60" ... fill="blue"
       onclick="add_polygon(evt)" > polygon </text>
  <text x="100" y="80"   ... fill="blue"
       onclick="add_path(evt)" > path </text>
</svg>

메뉴 텍스트 객체
도형 객체

메뉴 텍스트 파란색으로
기존 객체는 삭제

선택된 텍스트는 빨간색

사각형 신규 생성하기
- 우선 텍스트 색상 변경

- 사각형 생성

선분 신규 생성하기

다각형 신규 생성하기

path 신규 생성하기

도형 재사용하기 : <defs> - <use>

<svg width="150" height="100">
  <defs>
        <rect id="rect1" width="30" height="30" fill="blue" />
  </defs>
  <use xlink:href="#rect1" x="100" y="10" stroke="cyan"
           onclick="make_use(evt)" />
  <use xlink:href="#rect1" x="100" y="50" stroke="red"
           onclick="remove_use(evt)" />

  <script><![CDATA[
    var defuse = false;
    function make_use(evt) {
        if (defuse == true) { alert("already made ... ..."); return; }
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var SVGRoot = SVGDoc.getDocumentElement();
        var defs, rect, style, use1, use2;
        defs = SVGDoc.createElement("defs");
        rect = SVGDoc.createElement("rect");
        rect.setAttribute("id", "rect");
        rect.setAttribute("width", 25);
        rect.setAttribute("height", 25);
        rect.setAttribute("fill", "green");
        defs.appendChild(rect);
        defuse = true;

        use1 = SVGDoc.createElement("use");
        use1.setAttribute("x", 15);
        use1.setAttribute("y", 15);
        use1.setAttributeNS("http://www.w3.org/1999/xlink",   "xlink:href", "#rect");
        use2 = SVGDoc.createElement("use");
        use2.setAttribute("x", 50);
        use2.setAttribute("y", 50);
        use2.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#rect");
        SVGRoot.appendChild(defs);
        SVGRoot.appendChild(use1);
        SVGRoot.appendChild(use2);
    }
    function remove_use(evt) {
        if (defuse == false) { alert("objects ... not exist..."); return; }
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var node = SVGDoc.getElementById("rect");
        var parent = node.parentNode;
        parent.removeChild(node);
        defuse = false;
    }
  ]]></script>
</svg>

파란색 네모 정의 (defs)

파란색 네모 그리기 (use)

파란색 네모 그리기 (use)

- 녹색네모 있는지 여부

- 있으면 return

- 없으면 만들기
  녹색 네모의 정의
  <defs> , <rect>

- 첫 번째 녹색 네모 (use)

setAttributeNS
  ... xlink:href
  => 주소다르다

- 두 번째 녹색 네모 (use)

setAttributeNS

- 녹색 네모 제거하기

텍스트 정렬하기

<svg width="500" height="100" >
  <line x1="350" y1="10" x2="350" y2="80" stroke="magenta"/>
  <text x="350" y="30"
          onclick="make_default(evt)"> text-anchor (default) </text>
  <text x="350" y="50" text-anchor="middle"
          onclick="make_middle(evt)"> text-anchor (middle) </text>
  <text x="350" y="70" text-anchor="end"
          onclick="make_end(evt)"> text-anchor (end) </text>
  <rect x="20" y="20" width="200" height="60" fill="yellow"/>
  <text x="20" y="40" fill="blue" id="mtext">
    <tspan>TITLE at HEADER</tspan>
    <tspan x="20" dy="1.5em">contents begins at 1st line</tspan>
    <tspan x="20" dy="1em">continues to 2nd line</tspan>
  </text>

  <script><![CDATA[
    function make_default(evt) {
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var textnode, child;
        textnode = SVGDoc.getElementById("mtext");
        textnode.setAttribute("text-anchor", "start");
        for (i=0; i<textnode.childNodes.length; i++) {
            child = textnode.childNodes.item(i);
            if (child.nodeName == "tspan") child.setAttribute("x", 20);
        }
    }
    function make_middle(evt) {
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var textnode, child;
        textnode = SVGDoc.getElementById("mtext");
        textnode.setAttribute("text-anchor", "middle");
        for (i=0; i<textnode.childNodes.length; i++) {
            child = textnode.childNodes.item(i);
            if (child.nodeName == "tspan") child.setAttribute("x", 120);
        }
    }
    function make_end(evt) {
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var textnode, child;
        textnode = SVGDoc.getElementById("mtext");
        textnode.setAttribute("text-anchor", "end");
        for (i=0; i<textnode.childNodes.length; i++) {
            child = textnode.childNodes.item(i);
            if (child.nodeName == "tspan") child.setAttribute("x", 220);
        }
    }
  ]]></script>
</svg>

왼쪽 정렬 (시작위치 기준) : default
가운데 정렬 (가운데 기준)

오른쪽 정렬 (끝위치 기준)

tspan x="..." dy="..."

<text>의 정렬방식

<tspan>의 시작 위치

<tspan>의 가운데 위치

<tspan>의 끝 위치

애니메이션 생성하기

<svg width="200" height="100" onload="make_shape(evt)">
  <path d="M10 50 C10 0 90 0 90 50" stroke="grey" fill="none" />
  <circle id="mcircle" cx="10" cy="50" r="10" fill="green"
              onclick="make_motion(evt)"/>

  <script><![CDATA[
    function make_shape(evt) {
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var SVGRoot = SVGDoc.getDocumentElement();
        var circle, style, animate;
        circle = SVGDoc.createElement("circle");
        circle.setAttribute("cx", 150);
        circle.setAttribute("cy", 50);
        circle.setAttribute("r", 30);
        circle.setAttribute("fill", "yellow");

        animate = SVGDoc.createElement("animate");
        animate.setAttribute("attributeName", "fill");
        animate.setAttribute("from","red");
        animate.setAttribute("to", "blue");
        animate.setAttribute("dur", "3s");
        animate.setAttribute("repeatCount", "indefinite");
        circle.appendChild(animate);
        SVGRoot.appendChild(circle);
    }
    var motion = false;
    function make_motion(evt) {
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var circle = SVGDoc.getElementById("mcircle");
        if (motion == false) {
            circle.setAttribute("cx", 0); circle.setAttribute("cy", 0);
            circle.setAttribute("fill", "magenta");
            var animate = SVGDoc.createElement("animateMotion");
            animate.setAttribute("path", "M10 50 C10 0 90 0 90 50");
            animate.setAttribute("dur", "10s");
            animate.setAttribute("repeatCount", "indefinite");
            circle.appendChild(animate);
            motion = true;
        }
        else {
            circle.setAttribute("cx", 10); circle.setAttribute("cy", 50);
            circle.setAttribute("fill", "green");
            circle.removeChild(circle.firstChild);
            motion = false;
        }
    }
  ]]></script>
</svg>

페이지 로드시 생성
- 오른쪽 원

클릭하면 모션 생성
- 왼쪽 원

오른쪽 원: 스크립트로 생성
- 페이지 로드시 호출

애니메이션 생성
- fill 색상 변화

오른쪽 원에 생성된 애니메이션 추가

- 움직이고 있는지 여부
(motion)

왼쪽 원 객체 찾기

- cx,cy를 0으로 설정
(path를 따라가도록)
- animateMotion 추가

위치고정하고
animate노드 삭제

이벤트 추가생성하기

<svg width="150" height="80" >
  <rect x="80" y="20" width="40" height="40" fill="magenta"
      onclick="make_shape(evt)"
      onmouseover="change_color2()"
      onmouseout="change_color2()" />
  <script><![CDATA[
    function change_color2() {
        var rect2 = evt.getTarget();
        var fill2 = rect2.getAttribute("fill");
        if (fill2 == "magenta") rect2.setAttribute("fill", "red");
        else rect2.setAttribute("fill", "magenta");
    }
    var rect=null;
    function make_shape(evt) {
        if (rect != null) {
            rect.parentNode.removeChild(rect);
            rect = null; return;
        }
        var SVGDoc = evt.getTarget().getOwnerDocument();
        var SVGRoot = SVGDoc.getDocumentElement();

        rect = SVGDoc.createElement("rect");
        rect.setAttribute("x", 20);  rect.setAttribute("y", 20);
        rect.setAttribute("width", 40); rect.setAttribute("height", 40);
        rect.setAttribute("fill", "green");
        rect.addEventListener("click", change_stroke, false);
        rect.addEventListener("mouseover", change_color1, false);
        rect.addEventListener("mouseout", change_color1, false);
        SVGRoot.appendChild(rect);
    }
    function change_stroke() {
        var stroke = rect.getAttribute("stroke");
        if (stroke == "none") rect.setAttribute("stroke", "black");
        else rect.setAttribute("stroke", "none");
    }
    function change_color1() {
        var fill = rect.getAttribute("fill");
        if (fill == "green") rect.setAttribute("fill", "cyan");
        else   rect.setAttribute("fill", "green");
    }
  ]]></script>
</svg>

네모 추가
색상 변화
색상 변화)

색상 바꾸기
red <=> magenta

신규 생성된 네모

왼쪽네모 만들기

신규 생성

이벤트핸들러 붙이기
onclick="ch..._stroke()"
onmouseover="...color1"
onmouseout="...color1"

테두리 그리기/없애기

색상 바꾸기
red <=> magenta