How can I use a variable within an SVG path creation?

Question

Hi,

I'm creating an SVG path using the Raphael library and the following code:

this.resultsBoxLine1 = paper.path("M42 10L42 36");

I would like to use variables to dictate the position of the path, however I cannot write like this:

this.resultsBoxLine1 = paper.path("MmyVar11 myVar2LmyVar3 myVar4");

Does anybody know how I can do this?

Answer 1

Raphael path is just a string -- you can insert variables easily using + operator, e.g.:

this.resultsBoxLine1 = paper.path("M"+myVar11+" "+myVar2+"L"+myVar3+" "+myVar4);

Answer 2

What about paper.path("M" + myVar11 + " " + myVar2 + "L" + ...);

Just use JavaScript string concats

Answer 3

Alternatively

this.resultsBoxLine1 = paper.path("M{0} {1}L{2} {3}", myVar11, myVar2, myVar3, myVar4);