小编Ric*_*ard的帖子

snap svg:使用参数更改viewBox

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

  var mySvg=Snap("#mySvg");
  var worldMap=mySvg.select("#worldMap");//worldMap is an svg inside svg
Run Code Online (Sandbox Code Playgroud)

当我试着这个:

  worldMap.attr({viewBox:"760, 455, 132, 78"});
Run Code Online (Sandbox Code Playgroud)

它工作得很好.但是当我尝试使用参数时:

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

worldMap.attr({viewBox:"x, y, wi, hi");
Run Code Online (Sandbox Code Playgroud)

没事,为什么?我相信问题是要找到正确的语法.我也尝试过:

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]);
Run Code Online (Sandbox Code Playgroud)

到目前为止没有任何作用...任何建议?

svg snap.svg

5
推荐指数
1
解决办法
3153
查看次数

如何解析 SVG 元素的 viewBox x、y、宽度和高度值?

假设我有一个 SVG 元素:

<svg id="myMap" viewBox="0 0 200 200"></svg>
Run Code Online (Sandbox Code Playgroud)

我如何获得 myMap 的 viewBox 的特定值?举一个简单的例子:如何获取 myMap 的 viewBox 属性的“x”值?(对于上面的示例,x 值是第一个零 (0))。

以下是我尝试过的一些语法变体:

<script>
  var myMap = Snap("#myMap");
  alert(myMap.attr("viewBox"));//dislays [object Object]
  alert(myMap.attr("viewBox.vbx"));//also dislays [object Object]
  alert(myMap.attr("viewBox.x"));//also dislays [object Object]
</script>
Run Code Online (Sandbox Code Playgroud)

以上所有示例都在警报框中显示 [object Object]。
我需要视口的 x、y、宽度和高度的适当浮点值来实现地图中的放大和缩小功能。

svg snap.svg

2
推荐指数
1
解决办法
1981
查看次数

标签 统计

snap.svg ×2

svg ×2