Question

Fiddle!!

我已经设置了这个小提琴，以显示进入setViewBox（）函数的参数。问题是，它的工作方式对我来说毫无意义。

为什么setViewBox(0, 0, 625, 625)会产生比setViewBox(0, 0, 1250, 1250)更大的框/进一步放大？

另外，为什么setViewBox(-100, 0, 625, 625);将图像向右调整（我希望它会因为负x值而向左移动）？

这是文档关于setViewBox（x，y，w，h）的说法：

参数：

x - 新的x位置，默认为0

y - 新y位置，默认为0

w - 画布的新宽度

h - 画布的新高度

另外，我试图找出第一个（x）/第三个（w）和第二个（y）/第四个（h）参数之间的关系，使得框从中间放大和缩小，而不是如果有人有任何建议，请从左上角扩展。

Answer 1

答案是传递给setViewBox的参数基本上是告诉您在对象上查看的窗口的大小。如果窗口较小，则会看到较少的对象或对象放大。如果向左移动窗口，您将看到对象相对于窗口向右移动。关键是将它视为您正在查看的窗口，而不是对象本身的大小。

Answer 2

这是一个显示如何计算setViewBox值的示例，您必须包含jquery（以获取SVG cocntainer X和Y）：

var original_width = 777;
var original_height = 667;
var zoom_width = map_width*100/original_width/100;
var zoom_height = map_height*100/original_height/100;
if(zoom_width<=zoom_height)
   zoom = zoom_width;
else
   zoom = zoom_height;
rsr.setViewBox($("#"+map_name).offset().left, $("#"+map_name).offset().top, (map_width/zoom), (map_height/zoom));

拉斐尔的setViewBox（）？

2 个答案: