javascript - svg path not visible - Stack Overflow

admin管理员组

文章数量:1400621

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('', '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

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/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

• javascript
• svg
• path

Share Improve this question Follow edited Jun 29, 2015 at 18:20 Robert Longson 125k2727 gold badges267267 silver badges253253 bronze badges asked Jun 29, 2015 at 9:46 Atta ChAtta Ch 30944 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You've two separate problems

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

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

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).

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

本文标签： javascriptsvg path not visibleStack Overflow