Question

77

SVG - Adding a line with Javascript

rated 0 times [ 81] [ 4] / answers: 1 / hits: 25614 / 8 Years ago, mon, february 1, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayaw

Add To Favorites

Follow

Total Points: 749

Total Questions: 88

Total Answers: 86

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

tayaw questions

1 How to enable cache for getServerSideProps?

Thu, Mar 3, 22, 00:00, 2 Years ago

1 navigator.clipboard.readText() is not working in Firefox

Fri, May 7, 21, 00:00, 3 Years ago

1 Vuetify form .$refs validate is not a function

Wed, Oct 7, 20, 00:00, 4 Years ago

1 Using absolute position to place image above another image using Tailwind CSS

Sun, Sep 6, 20, 00:00, 4 Years ago

1 How to make div tag clickable with Link from react-router-dom?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 8 Years ago raynamadilynl · 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