使用按钮在溢出隐藏的div内移动图像

Question

我只是想要一些指导或链接来解决这个问题，我有一张地图，是一张svg图像，它在一个div里面我叫做＃34; mainWrapper＆＃34;

<div id="mapWrapper">
    <img src="images/map.svg" id="map"/>
</div>

我还在所有内容上放置了几个按钮（放大，缩小，上，下，左，右），不知怎的，我想按下那些按钮/图像，并相应地将内部地图图像移动到按钮上。也放大和缩小。有一些指导要实现这个目标吗？

我的实际完整代码是：

HTML：

＆＃13;

＆＃13;

#mapWrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
}

#zoomIn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  cursor: pointer;
}

#zoomOut {
  position: absolute;
  bottom: 20px;
  right: 80px;
  z-index: 99;
  cursor: pointer;
}

#right {
  position: absolute;
  bottom: 20px;
  right: 140px;
  z-index: 99;
  cursor: pointer;
}

#up {
  position: absolute;
  bottom: 20px;
  right: 200px;
  z-index: 99;
  cursor: pointer;
}

#down {
  position: absolute;
  bottom: 20px;
  right: 260px;
  z-index: 99;
  cursor: pointer;
}

#left {
  position: absolute;
  bottom: 20px;
  right: 320px;
  z-index: 99;
  cursor: pointer;
}

＆＃13;

<img src="images/ZI.svg" id="zoomIn" />
<img src="images/ZO.svg" id="zoomOut" />
<img src="images/R.svg" id="right" />
<img src="images/U.svg" id="up" />
<img src="images/D.svg" id="down" />
<img src="images/L.svg" id="left" />

<div id="mapWrapper">
  <img src="images/map.svg" id="map" />
</div>

＆＃13;

＆＃13;

＆＃13;

提前致谢