拉斐尔元素重叠放大控件

Question

我遇到了一个问题，我的Zoom +按钮确实放大了元素，但随着元素的增长它们会重叠。

以下是链接：http://jsfiddle.net/knottAverage/ArKDp/28/

这是我用于缩放+

的功能

$maxIcon.click(function(e) {
mapZoom /= mapMultiplier;
rsrGroupies.scale(mapZoom);
e.stopPropagation();
e.preventDefault();
rsr.setViewBox(0, 0, rsr.mapWidth, rsr.mapHeight);
});​

提前感谢您的帮助。

Answer 1

对集合进行大规模缩放正在完成它应该做的事情 - 它正在缩放每个元素。将每个元素相对于中心点转换还需要额外的逻辑。

但我相信视窗可以用来完成完全相同的效果。 This variation of your fiddle演示了如何根据缩放调整画布的视图区域，并添加拖放以支持导航到缩放的场地地图的隐藏区域。可悲的是，它也遭到了极大的破坏 - 实际上，只是功能足以指出可能的解决方案向量。我希望你会发现它有用而不是真气！

最棘手的事情可能是缩放按钮（和任何其他导航组件）需要翻译并缩放到否定可视区域的操作。否则，它们将随着画布的其余部分一起变焦和移动！建议在第一张纸的顶部创建第二张纸（使用绝对定位和适当的z-index），并将导航元素放在最顶层。

祝你好运。

Answer 2

在SVG容器之上添加缩放按钮作为单独的PNG图像（通过jQuery），使它们与SVG无关，因此它们不会随着viewBox的变化而放大（这就是我对SVG地图的处理方式）。 / p>