SVG

Question

I wrote a simple code to add a line into my svg page when I click a button

This is the html

<body>
<svg  width="500" height="400">
</svg>
<button id="btn1">Append text</button>
</body>

And the Script

$(document).ready(function(){
$("#btn1").click(function(){
      $("svg").append(' <line x1="10" y1="10" x2="40" y2="40" style="stroke: black">' );
    console.log("done!");
  });
});

And jsfiddle https://jsfiddle.net/dch7xyez/1/

The line gets appended but its not visible. Can anyone explain to me why?

thatOneGuy · Accepted Answer

Try doing it this way : https://jsfiddle.net/dch7xyez/2/

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','200');
newLine.setAttribute('y2','200');
newLine.setAttribute("stroke", "black")
$("svg").append(newLine);

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

SVG - Adding a line with Javascript [duplicate]

Tags:

javascript

html

omidh

1 Answers

thatOneGuy

Recent Activity

Donate For Us