[CSS] SVG Controll - Line Draw

차트의 카테고리필드에 애니메이션을 넣어보았다.

 

카데고리별로 지정된 색상이 있으며, 색상 선이 애니메이션으로 그어지는 방식이다.

 

차트는 SVG TAG로 구성되어있으며 text필드에 접근하기위하여 JQuery를 사용하였다.

 

---

 

Javascript

각각의 라인을 Class를 추가한 후  g tag로 묶어 차트의 html에 붙여넣는 방식을 사용하였다.

이때 카테고리 필드의 텍스트 문자의 크기가 미세하게 다름으로 분기처리하여 라인의 길이를 정해준다.

변수 siteColor 는 색상을 담고있는 배열이다.

function drawLine() {
    var svg = document.querySelector('div.chartEmpty svg');
    var gTag = svg.querySelector('g');
    var textTag = gTag.querySelectorAll('text');
    var lineHtml = "";

    lineHtml += "<g>";
    if (textTag.length > 0) {
        for (var i = 0; i < textTag.length; i++) {

            if (textTag[i].attributes.fill.value == "#232323") {
                if (textTag[i].innerHTML == "JB") {
                    var coor_x1 = Number(textTag[i].attributes.x.value) - 5;
                    var coor_y = Number(textTag[i].attributes.y.value) + 9;
                } else if (textTag[i].innerHTML == "HQ") {
                    var coor_x1 = Number(textTag[i].attributes.x.value) + 2;
                    var coor_y = Number(textTag[i].attributes.y.value) + 9;
                } else if (textTag[i].innerHTML == "NB") {
                    var coor_x1 = Number(textTag[i].attributes.x.value);
                    var coor_y = Number(textTag[i].attributes.y.value) + 9;
                } else {
                    var coor_x1 = Number(textTag[i].attributes.x.value) - 1.5;
                    var coor_y = Number(textTag[i].attributes.y.value) + 9;
                }

                var coor_x2 = coor_x1 + 24;
                var lineColor = siteColor[textTag[i].innerHTML];

                //  console.log(coor_x1 + ', ' + coor_y + ', ' + coor_x2 + ', ' + lineColor);
                lineHtml += "<line class='ideaMainSiteLine' x1='" + coor_x1 + "' y1='" + coor_y + "' x2='" + coor_x2 + "' y2='" + coor_y + "' style='stroke:" + lineColor + ";stroke-width: 3;stroke-opacity:1;stroke-linecap:round;'></line>";
            }
        }

    } else {
        // console.log("TEXT Tag 없음!!!");
    }
    lineHtml += "</g>";
    //console.log(lineHtml);

    svg.innerHTML += lineHtml;
}

 

 

CSS

/* SVG LINE Animation 추가 */
.ideaMainSiteLine {
	stroke-dashoffset:100;
	stroke-dasharray:100;
	-webkit-animation: draw 5s linear;
  	-moz-animation: draw 5s linear;
  	animation: draw 5s linear ;
  	animation-iteration-count:1
	fill-opacity: 0;
  	-webkit-animation-fill-mode : both
}

 

결과