How To Draw Bezier Curves In Loop With Svg?

So I know that to draw bezier curve you use: path.setAttributeNS(null, 'd', 'M5,5 C5,45 45,45 45,5'): But I would like to draw them in loop (not animation) and change their locati

Solution 1:

You could recontruct the string:

var x1 = 5;
var x2 = 5;
var attr = "M" + x1 + "," + x2 + " C" + ...

path.setAttribute("d", attr);

Or alternatively use the SVG DOM so if you already have a single bezier curve

var move = path.pathSegList.getItem(0);
var curve = path.pathSegList.getItem(1);

then you can use the SVGPathSegCurvetoCubicAbs interface to set the curve attributes e.g.

curve.x = 5;curve.y = 10;curve.x1 = 20curve.y1 = 15;curve.x2 = 12;curve.y2= 13;

In your attempt

var attr = "M" + x1 + "," + x2 + " " + "C" + x3 + "," + x4 + " " + x5 "," + x6 + " " + x7 + "," + x8;

                                                                      ^ missing + sign

and

path.setAttributeNS("d", attr);

setAttributeNS takes 3 arguments or alternatively setAttribute takes 2.

path.setAttributeNS(null, 'stroke', '#'+Math.round(0xffffff * Math.random()).toString(16));

this does not always produce valid stroke syntax although occasionally it does so you will see some output some times.

browsers will report these issues in their error/web consoles so you really should try to take advantage of that.