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]);

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

Answer 1

将您的值和分隔符 (,) 连接成一个字符串。试试这个，它应该可以工作。

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

Answer 2

您还可以使用：

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

它更具可读性

编辑：在我的第一个回答中，我使用了“,”连接，但在 MDN 教程定义中使用 space char ' '

snap svg ：使用参数更改 viewBox

snap svg : change viewBox using parameters

svg

snap.svg