Snap SVG：使用参数更改viewBox

Question

什么是使用预定义值提供SVG元素的viewBox属性的正确语法？我有这个代码:

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

当我尝试这样做时：

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

它的工作还好。但是当我使用参数尝试时：

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

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));
worldMap.attr({viewBox:[x, y, wi, hi]);

到目前为止还没有任何效果...有什么建议吗？

- Rickard

Answer 1

将您的值和分隔符（逗号）作为字符串连接起来。尝试这个，它应该可以工作。

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

- Holger Will

---

永远不要想那个，谢谢你 Holger，这很有帮助。 - Rickard

Answer 2

您也可以使用以下方法：

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

更易读

编辑： 在我的第一个答案中，我使用了逗号连接，但在MDN教程定义中，使用空格字符' '

- Искрен Станиславов