Home/ Questions/Q 6652019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T01:04:55+00:00

I want to add a new line into the svg when, the add button

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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