如何使用JavaScript svg后面保持点击访问和鼠标移动？

我有一个SVG，它将位于div的顶部，该div通过监听x轴上相对于图像的鼠标移动来循环浏览图像。SVG按原样挂在屏幕顶部（使用top：），这也覆盖了导航栏。

/*?----------LANDING----------*/
.landing {
  position: relative;
  padding: none;
  margin: none;
  min-height: 80%;
  max-height: 80%;
}
#sign {
  position: relative;
  display: block;
  margin: 0 auto;
  top: -15vh;
  width: 50%;
  animation: swing 3.6s infinite;
  animation-timing-function: ease-in-out;
  transform-origin: top;
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
}
#image-container {
  width: 100%;
  min-height: 80vh;
  background-color: #eee;
  position: absolute;
  overflow: hidden;
  justify-content: bottom;
}

#image-container img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#image-container img.active {
  opacity: 1;
}

如何移除SVG周围的包含框，使其占用的空间不会太大，并且可以直接将阴影应用于SVG？

当我悬停在SVG和图像容器上时，我如何仍然使用movemouse eventListner？

我怎么还能点击SVG控制框后面的导航栏选项？（当然，如果盒子不是那么大的话，这不会是个问题）

我所尝试的：

我试着使用ChatGPT来给我一些关于如何移除盒子的想法。我试着在Illustrator中编辑它，同时做背景：透明之类的。超过2个小时的工作，无法取出盒子。

我这边没有已知的解决方案。有办法绕过它吗？最好的情况是我的盒子消失了，不再阻挡其他div。