Could not position the SVG Element.

Aug 5 2016 1:09 AM
I need to place the SVG element at the custom position For example my svg element should place at the x=100 and y=100 th position.
 
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var item = ('<svg height="50" left="100px" top="100px" display="block" width="50"><line x1="100" y1="100" x2="150" y2="150" style="stroke:#ff0000;stroke-width:2" /> </svg>')
$("#container").append(item);
});
});
</script>
</head>
<body>
<button id="btn" height = "30" width="100">Click</button>
<div id="container" height="300" width="300"></div>
</body>
</html>
 
In the above code snippet my element should be placed inside the div at the button click action.
 
Please revert me back if anyone have the concerns

Answers (6)