5

what is the correct syntax to supply a viewBox attribute of an svg element using pre-defined values? I have this :

  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 just fine. However when i tried it using parameters :

var x=760;
var y=455;
var wi=132;
var hi=78;

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

nothing happened, why? I belive the problem is to find the correct 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 so far...any suggestion?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
Rickard
  • 426
  • 7
  • 23

2 Answers2

3

concatenate your values and your seperators (,) as a string. Try this, it should be working.

worldMap.attr({viewBox:x+","+y+","+wi+","+hi});
Holger Will
  • 7,228
  • 1
  • 31
  • 39
3

you can also use:

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

it's more readable

Edit: in my first answer i used joining with ',', but in MDN tutorial definition is with space char ' '

Искрен Станиславов
  • 527
  • 5
  • 23