add a new line in svg, bug cannot see the line

2020-02-04 11:21发布

站内问答 / jQuery
1086 2 6

I want to add a new line into the svg when, the add button is pressed, a new line should be added into the svg I can sure the line is added in the elements, but why it is not displayed on the screen?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#map
{
    border:1px solid #000;
}
line
{
    stroke:rgb(0,0,0);
    stroke-width:3;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    $("#add").click(function(){
        var newLine=$('<line id="line2" x1="0" y1="0" x2="300" y2="300" />');
        $("#map").append(newLine);
    });
})
</script>
</head>

<body>

<h2 id="status">
0, 0
</h2>
<svg id="map" width="800" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line id="line" x1="50" y1="0" x2="200" y2="300"/>
</svg>
<button id="add">add</button>



</body>
</html>

标签： jquery svg
举报
2条回答
The star\"
2楼-- · 2020-02-04 11:45

In order to add elements to an SVG object those elements have to be created in the SVG namespace. As jQuery doesn't allow you to do this at present (AFAIK) you can't use jQuery to create the element. This will work:

$("#add").click(function(){
    var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
    newLine.setAttribute('id','line2');
    newLine.setAttribute('x1','0');
    newLine.setAttribute('y1','0');
    newLine.setAttribute('x2','300');
    newLine.setAttribute('y2','300');
    $("#map").append(newLine);
});

Here's a working example.

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
3楼-- · 2020-02-04 12:01

with little bit less code 

 $("#add").click(function(){
      $(document.createElementNS('http://www.w3.org/2000/svg','line')).attr({
          id:"line2",
          x1:0,
          y1:0,
          x2:300,
          y2:300
      }).appendTo("#map");

});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)