无法在 Raphael 中扩展多条路径？答案

【问题标题】：Can't scale multiple paths in Raphael?无法在 Raphael 中扩展多条路径？
【发布时间】：2011-12-31 13:55:46
【问题描述】：

我已尝试使用 SO 上的当前热门问题：Scaling multiple paths with raphael

...运气不好。我正在通过 Raphael 构建美国地图，虽然地图非常好，但我需要它的大小可能是当前大小的 30%。

我能够将初始 Raphael 画布上的 attr 更改为“.5”，但这只会调整每个单独路径而不是整个画布的大小。我也尝试过使用 javascript 来缩放包含画布的 div 无济于事。

路径：实际页面： http://praxxgray.com/am/rafe2/mapTest.html

javascript: http://praxxgray.com/am/rafe2/js/initMap.js

我是 Raphael 的新手，但我的老板们一直在我的脖子上呼吸，以使其发挥作用。拉斐尔地图下方的图像显示了我的目标尺寸。我觉得我很接近，也许我调用了错误的对象来调整大小？

帮我欧比万！

谢谢！

【问题讨论】：

其实，谢谢大家的回答。使用以下方法找到了解决方案：shapevent.com/scaleraphael
自己添加作为答案并将其标记为正确。这样这个问题就会从未回答的列表中消失:) 谢谢

标签： javascript html canvas svg raphael

【解决方案1】：

我想出了这个 jsfiddle。我在我自己的多个地区的地图中使用它。适用于 IE6、8 和 9

http://jsfiddle.net/chrisloughnane/EUwRq/

【讨论】：

【解决方案2】：

将参数 viewBox 和 preserveAspectRatio 添加到 SVG 元素。我尝试添加这些参数，只是想看看我是否设法改变了大小，我做到了。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
   viewBox="0 0 2500 3100" preserveAspectRatio="none">

更多关于 viewBox 属性here。

【讨论】：

【解决方案3】：

不知道这是否会有所帮助，而且有点过时了，但是您是否尝试过将地图粘贴到它自己的 raphael 实例中，然后使用 Paper.setViewBox(...) 调整它的大小？

 var map = Raphael(100,100,800,500);
 //
 // draw my very big map, bigger than 800x500
 //
 map.setViewBox(100,100,800,500,true); 
 // doesn't change the size of the raphael instance, but will force the graphics to fit
 // inside it.

setViewBox 允许您更改视口。来自链接 - “设置纸张的视图框。实际上，它使您能够通过指定新边界来缩放和平移整个纸张表面”。

这可能是获得您想要的东西的快速方法。它只是拉斐尔 2 :(

（这个应该可以工作，但我还没有实际测试过。正如我所说，它有点不合时宜......）

【讨论】：

这似乎是放大 IE 的错误（6+ 被认为是兼容的）。