Snap svg: change viewBox with options

Question

What is the correct syntax for providing the viewBox attribute of an svg element using predefined values? I have it:

var mySvg=Snap("#mySvg"); var worldMap=mySvg.select("#worldMap");//worldMap is an svg inside svg 

when i tried this:

  worldMap.attr({viewBox:"760, 455, 132, 78"}); 

It works great. However, when I tried to use the options:

 var x=760; var y=455; var wi=132; var hi=78; worldMap.attr({viewBox:"x, y, wi, hi"); 

nothing happened why? I believe the problem is finding the right syntax. I also tried:

 worldMap.attr({viewBox:x, y, wi, hi); worldMap.attr({viewBox:{x, y, wi, hi}); worldMap.attr({viewBox:(x, y, wi, hi)); worldMap.attr({viewBox:[x, y, wi, hi]); 

nothing works yet ... any suggestion?

Answer 1

combine your values ​​and your delimiters (,) as a string. Try this, it should work.

 worldMap.attr({viewBox:x+","+y+","+wi+","+hi}); 

Answer 2

you can also use:

 worldMap.attr({viewBox:[x,y,wi,hi].join(',')}); worldMap.attr({viewBox:[x,y,wi,hi].join(' ')}); 

it is more readable

Edit: in my first answer I used a connection with ',' but in MDN the definition of a tutorial with char space ''