add a new line in svg, bug cannot see the line_问答_开发者

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

开发者 https://www.devze.com 2023-04-08 20:06 出处：网络

I want to add a new line into the svg when, the add button is pressed, a new li开发者_Python百科ne should be added into the svg

相关专题：jquery svg

I want to add a new line into the svg when, the add button is pressed, a new li开发者_Python百科ne 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>

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.

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");

});

I solved this by reading the svg elements innerHTML property and then writing it back to the svg elements innerHTML property This forces an element refresh.