Menu
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>
792
The <line> element is an SVG basic shape used to create a line connecting two points.
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.
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
