SVG 案例：动态去创建分支节点，当鼠标经过某个节点时，分支线会高亮

css:

<style>
#div1{ width:780px; height:400px; background:#fff; margin:20px auto; overflow:hidden;}
body{ background:black;}
</style>

html:

<div id="div1"></div>

js:

var svgNS = 'http://www.w3.org/2000/svg';
    var oParent = document.getElementById('div1');
    var centerX = oParent.offsetWidth/;
    var centerY = oParent.offsetHeight/;

    var circleNum = ;
    var angleNum = /circleNum;
    var centerR     = ;
    var otherData = [];

    for(var i=;i<circleNum;i++){
        var y = Math.sin(i**Math.PI/)*centerR + centerY;
        var x = Math.cos(i**Math.PI/)*centerR + centerX;
        otherData.push({x : x , y : y , text : i});
    }

    var data = {
        centerNode : { text : '凤凰网' },
        otherNode : otherData
    };

    function createTag(tag,objAttr){
        var oTag = document.createElementNS(svgNS , tag);
        for(var attr in objAttr){
            oTag.setAttribute(attr , objAttr[attr]);
        }
        return oTag;
    }

    function addTag(){

        var oSvg = createTag('svg',{'xmlns':svgNS,'width':'100%','height':'100%'});

        for(var i=;i<data.otherNode.length;i++){
            addOtherTag( data.otherNode[i] , oSvg );
        }

        var oG = createTag('g',{'style':'cursor:pointer'});
        var oCircle = createTag('circle',{'cx':centerX,'cy':centerY,'r':'','fill':'white','stroke':'red','stroke-width':''});
        var oText = createTag('text',{'x':centerX,'y':centerY+,'font-size':'','text-anchor':'middle'});
        oText.innerHTML = data.centerNode.text;

        oG.appendChild(oCircle);
        oG.appendChild(oText);

        oSvg.appendChild(oG);
        oParent.appendChild(oSvg);
    }

    addTag();

    function addOtherTag(otherAttr , oSvg){

        var oG = createTag('g',{'style':'cursor:pointer','class':'lineStyle'});
        var oLine1 = createTag('line',{'x1':otherAttr.x,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':'#ccc'});
        var oLine2 = createTag('line',{'x1':otherAttr.x,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':'transparent','stroke-width':''});
        var oRect = createTag('rect',{'x': (otherAttr.x + centerX)/ -  ,'y': (otherAttr.y + centerY)/ -  ,'fill':'#999','width':'','height':'','rx':''});
        var oText = createTag('text',{'x':(otherAttr.x + centerX)/,'y':(otherAttr.y + centerY)/ + ,'fill':'white','font-size':'','text-anchor':'middle'});
        oText.innerHTML = '?';

        oG.appendChild(oLine1);
        oG.appendChild(oLine2);
        oG.appendChild(oRect);
        oG.appendChild(oText);

        oSvg.appendChild(oG);

        var oG = createTag('g',{'style':'cursor:pointer','class':'circleStyle'});
        var oCircle = createTag('circle',{'cx':otherAttr.x,'cy':otherAttr.y,'r':'','fill':'white','stroke':'red','stroke-width':''});
        var oText = createTag('text',{'x':otherAttr.x,'y':otherAttr.y+,'font-size':'','text-anchor':'middle'});
        oText.innerHTML = otherAttr.text;

        oG.appendChild(oCircle);
        oG.appendChild(oText);

        oSvg.appendChild(oG);

    }

    bindTag();

    function bindTag(){
        var aLine = document.getElementsByClassName('lineStyle');
        var aCircle = document.getElementsByClassName('circleStyle');

        for(var i=;i<aCircle.length;i++){
            aCircle[i].onmouseenter = function(){
                startMove( this.getElementsByTagName('circle')[] ,  ,  );
                var prevLine = this.previousElementSibling;
                prevLine.getElementsByTagName('line')[].setAttribute('stroke','blue');
                prevLine.getElementsByTagName('rect')[].setAttribute('fill','red');

            };
            aCircle[i].onmouseleave = function(){
                startMove( this.getElementsByTagName('circle')[] ,  ,  );
                var prevLine = this.previousElementSibling;
                prevLine.getElementsByTagName('line')[].setAttribute('stroke','#ccc');
                prevLine.getElementsByTagName('rect')[].setAttribute('fill','#999');
            };
        }
        for(var i=;i<aLine.length;i++){
            aLine[i].onmouseenter = function(){
                this.getElementsByTagName('line')[].setAttribute('stroke','blue');
                this.getElementsByTagName('rect')[].setAttribute('fill','red');
                var prevCircle = this.nextElementSibling;
                startMove( prevCircle.getElementsByTagName('circle')[] ,  ,  );
            };
            aLine[i].onmouseleave = function(){
                this.getElementsByTagName('line')[].setAttribute('stroke','#ccc');
                this.getElementsByTagName('rect')[].setAttribute('fill','#999');
                var prevCircle = this.nextElementSibling;
                startMove( prevCircle.getElementsByTagName('circle')[] ,  ,  );
            };
        }

    }

    function startMove(obj,r1,r2){
        var nowR = r1;
        var overR = r2;
        obj.speed = ;
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){

            obj.speed += (overR - nowR)/;
            obj.speed *= 0.9;

            if( Math.abs(overR - nowR)<= && Math.abs(obj.speed)<= ){
                clearInterval(obj.timer);
                obj.setAttribute( 'r' , overR );
            }
            else{
                nowR += obj.speed;
                obj.setAttribute( 'r' , nowR );
            }

        },);
    }

效果：