在javascript中的每次点击中删除svg行新的最后一个节点

时间:2012-09-09 12:24:35

标签: javascript dom svg

我目前正在开发一个离线应用程序,我使用的是Interactive svg。我的问题是在单击事件上删除svg行最后一个节点..案例是......它在(第一次点击)工作,它删除最后一个节点。但是当我再试一次..(第二次点击)它不再起作用了。我似乎无法找到问题。

这是关于创建svg线段的代码..

var glblLineNode;
var tempX=[], tempY=[], tempLine=[];

function drawRoad()
{   
       var path = glblGeogSorc.getElementsByTagName("path")
       for (var loop=0; loop<Slct.length; loop++)
       {
         path[loop].addEventListener("mousedown", function(e)
         {
            if(e.button == 0 &&  glblenblroad === true)
            {

                var mousex = e.clientX - matrixE;
                var mousey = e.clientY - matrixF;

                tempX.push(mousex), tempY.push(mousey);

                if(tempX.length > 1)
                {

                    var road = document.createElementNS("http://www.w3.org/2000/svg", "line");                          
                        road.x1.baseVal.value = tempX[tempX.length -1];
                        road.y1.baseVal.value = tempY[tempY.length -1];
                        road.x2.baseVal.value = tempX[tempX.length -2];
                        road.y2.baseVal.value = tempY[tempY.length -2];
                        road.setAttributeNS(null, "stroke", "#686968");
                        road.setAttributeNS(null, "stroke-width", "14.520");
                        road.setAttributeNS(null, "stroke-linecap", "round");
                        road.setAttributeNS(null, "fill", "none");
                        glblGeogSorc.getElementsByTagName("g")[0].appendChild(road);

                        tempLine.push(road);
                        glblLineNode = road;

                }

            }
        },false);

    }

}

让我们假设已经执行了drawRoad()函数, 那么这是我的代码,从函数drawRoad()

中删除创建的svg行的lastnode
delLastNode.addEventListener("click", function()   //  delLastNode is a var for my button
{

   glblGeogSorc.parentNode.removeChild(glblLineNode);  //glblLineNode is global var prior to the line created
   tempLine.pop();                                    //as well as tempLine[]
   tempX.pop();                                       
   tempY.pop();                                       

},false);

它适用于第一次单击delLastNode(Button),但是当尝试再次单击它时 它不再起作用..我的目标是在每次想要单击delLastNode(Button)时删除每个新的最后一个节点。

0 个答案:

没有答案