SVG.js library - could not draw a curve using draw.path

Question

I am using SVG.js library to draw a curve in JavaScript. To do that, I used the below code

var x1 = parseInt(left_bulb[i]) + 4;
               var y1 = parseInt(top_bulb[i]) + 16
               var x2 = parseInt(left_bulb[i]) + 4;
               var y2 = parseInt(top_bulb[i]) + 16
               var x3 = parseInt(left_bulb[i]) + 16 - 1;
               var y3 = parseInt(top_bulb[i]);
               var x4 = parseInt(left_bulb[i]) + 16 + 4;
               var y4 = parseInt(top_bulb[i]) + 16 - 1;
    draw.path('M x1,y1 C x2,y2 x3,y3 x4,y4').stroke({width:3, color:"#000000"});

The below draw.path() code works fine. This function works fine when direct numbers are given but not with variables like x1, y1... so on. Could you please tell me how to get it working with the variables given. It does not give a curve for the above code.

var path = draw.path('M100,200 C100,100 400,100 400,200 H 500 V 400 Z')
            .stroke({width:9, color:"#f23"})
            .fill('orange')

Answer 1

You need to evaluate the arguments. At the moment you're just creating a string with the character x1,y1 etc in it.

var x1 = parseInt(left_bulb[i]) + 4;
var y1 = parseInt(top_bulb[i]) + 16
var x2 = parseInt(left_bulb[i]) + 4;
var y2 = parseInt(top_bulb[i]) + 16
var x3 = parseInt(left_bulb[i]) + 16 - 1;
var y3 = parseInt(top_bulb[i]);
var x4 = parseInt(left_bulb[i]) + 16 + 4;
var y4 = parseInt(top_bulb[i]) + 16 - 1;
draw.path('M ' + x1 + ',' + y1 + ' C ' + x2 + ',' + y2 + ' ' + x3 + ',' + y3 + ' ' + x4 + ',' + y4).stroke({width:3, color:"#000000"});