在javascript中使用svg连接两行

时间:2018-02-02 04:16:52

标签: javascript svg

我使用svg绘制两行,但是当我渲染它时,我只能看到一行而另一行无法看到。我不知道如何追加这两行并让它全部看到。当我点击多边形时,应该看到两条线。任何人都可以帮助我吗?

这是我的代码

          var group = evt.target.parentNode;
      // Get the bounding box of the group
      var bbox = group.getBBox();
      // Add a triangle to the group
      var svgns = "http://www.w3.org/2000/svg";
      var line = document.createElementNS(svgns, "line");
      var line2 = document.createElementNS(svgns, "line");
      line.setAttribute('id','line2');
    line.setAttribute('x1','0');
    line.setAttribute('y1','0');
    line.setAttribute('x2','5');
    line.setAttribute('y2','19');
    line.setAttribute("stroke", "black")
    line2.setAttribute('id','line2');
    line2.setAttribute('x1', '7');
    line2.setAttribute('y1','5');
    line2.setAttribute('x2','5');
    line2.setAttribute('y2','19');
    line2.setAttribute("stroke", "black");
      var xPos = bbox.x + bbox.width / 2;  
      var yPos = bbox.y + bbox.height / 2;     
      line2.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
      group.appendChild(line2);

1 个答案:

答案 0 :(得分:1)

我看到你将line2追加到该群组。

group.appendChild(line2);

appendChild()对另一条线的调用在哪里?