CODEWITHSUNDEEP
javascriptsvgpath
Atta Ch
Atta Ch

Reputation: 309

svg path not visible

Why is this path not visible? I am creating the path dynamically with javascript, but the path is not visible on screen, it is present in the DOM though.

var svg = document.getElementById('svg');
var path = document.createElementNS('http://www.w3.org/svg', 'path');
path.setAttribute('d', 'M100,100 L100,100');
path.setAttribute('style', 'stroke:black;fill:none;');
path.setAttribute('matrix', '1,0,0,1,100,100');
svg.appendChild(path);

Or as a JsFiddle

Upvotes: 2

Views: 3771

Answers (3)

Mhadhbi issam
Mhadhbi issam

Reputation: 420

var path_elemnt = document.createElementNS("http://www.w3.org/2000/svg", "path")  ;
var sgv_element = document.createElementNS("http://www.w3.org/2000/svg", "svg")  ;

Upvotes: 0

Mathias Vonende
Mathias Vonende

Reputation: 1380

You are creating a path, that has a starting-point at 100,100 (denoted by M100,100), and drawes a "line" to that exact same point (L100,100), so you are not drawing a line at all.

SVG-paths differentiate between absolute and relative coordinates. Using capital letters, you are indicating absolute values. Small letter are used for relative coordinate-values (relative to the coordinate where you have drawn or moved before).

You should either use small letters, to indicate a relative path: M100,100 l100,100 means, start at 100,100 and draw a line to a point, that lies 100px in x and 100px in y-direction.

Or you should use another coordinate entireley, like e.g.: M100,100 L110,110 (start at 100,100 and draw a line to 110,110).

Upvotes: 2

Robert Longson
Robert Longson

Reputation: 123985

You've two separate problems

  1. The SVG namespace is actually http://www.w3.org/2000/svg

  2. You're not drawing a line that goes anywhere, it starts at 100,100 and finishes at the same place.

Upvotes: 6

Related Questions