Extend SVG path

Question

In one of my application I am creating a SVG path with the following code

var points="M1180,401 S1180,476 1030 476 L100, 476";
createPath(points, id, name);


   function createPath(points, id, nane) {

                var shape = document.createElementNS(svgNS, "path");
                shape.setAttributeNS(null, "d", points);
                shape.setAttributeNS(null, "class", "path");
                shape.setAttributeNS(null, "id", id);
                document.getElementById("holder").appendChild(shape);
                return id;
}

this will create a path in my SVG ( named "holder") . further in a button press event I need to extend its length. Since there are more than one paths in that SVG , so we cant take it points.

Please help Thanks

Please explain what you mean with "extend its length" - in any particular direction, transform/stretch the path, or something else? — Erik Dahlström, May 14 '12 at 08:14
Hi now I draw the line still x 100 , y 476 ... I need to extend it to x -250 , y 476 — ramesh, May 15 '12 at 03:56

score 2 · Accepted Answer · answered May 14 '12 at 15:13

2

If you keep id unique you can use it to retrieve your shape with document.getElementById(id) and modify the path from there.

answered May 14 '12 at 15:13

dr jerry

9,768
24
79
122

my id is unique and can you please let me know how to modify the path ? – ramesh May 15 '12 at 03:58
1

as points is `points="M1180,401 S1180,476 1030 476 L100, 476";` You can simply do: `shape.setAttributeNS(null, "d", "M1180,401 S1180,476 1030 476 L250, 476");` In fact my own project iscriptdesign.com for parametric design relies heavily on this feature as it allows to modify the d attribute by recalculating its contents after changing sliders or input fields. – dr jerry May 15 '12 at 07:00

Extend SVG path

1 Answers1