如何在不阻塞其他 div 元素的情况下创建 2 个单独的 SVG？

Question

我有一个分为 3 个部分的页面。一个带有几个按钮的顶栏、一个大的中间部分和一个带有更多按钮的底栏。最重要的是，几个浮动窗口将根据单击的按钮打开和关闭（此问题可忽略）。

请求的结构是中间部分必须是一个空的div，它将通过jquery加载其他几个页面。其中一些页面具有交互元素，因此它必须接受 mouse events，尽管 div 在所有页面元素中具有最低的 z-index。
顶栏和底栏上的按钮都必须是svg 元素，这既是因为矢量属性，也因为偶尔会出现奇怪的形状。而且它们的z-index 必须始终高于中间 div。

我的问题是 svg 覆盖了中间 div 并阻止了所有交互（在这种情况下，当您单击 div 时会发出简单的警报），尽管没有任何视觉元素重叠。
我尝试调用 2 个不同的 svg，每个栏一个，但第二个从未出现。我也尝试在主 svg 中调用 2 个 svg，并将 div 也包含在内，但它也不起作用。

这是它当前外观的示例（绝对位置、z-index 和样式在 css 中定义）：

 <div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

      <svg id="topBar" class="topBar" x="0" y="0">
           <rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
           <rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
      </svg>

      <svg id="bottomBar" class="bottomBar" x="0" y="500">
           <rect id="btn_3" class="topBtn" x="0" y="0" height="30" width="100"/>
           <rect id="btn_4" class="topBtn" x="100" y="0" height="30" width="100"/>
      </svg>
 </svg>

这是第一次尝试解决方案：

 <div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div>

 <svg id="topBar" class="topBar" x="0" y="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
      <rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
 </svg>

 <svg id="bottomBar" class="bottomBar" x="0" y="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
      <rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
 </svg>

这是第二次尝试解决方案：

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

      <svg id="topBar" class="topBar" x="0" y="0">
           <rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
           <rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
      </svg>

      <div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div>

      <svg id="bottomBar" class="bottomBar" x="0" y="500">
           <rect id="btn_3" class="topBtn" x="0" y="0" height="30" width="100"/>
           <rect id="btn_4" class="topBtn" x="100" y="0" height="30" width="100"/>
      </svg>
 </svg>

Answer 1

首先，您应该为<svg> 元素指定宽度和高度属性。如果您使用的是 Chrome，如果您忽略这些属性，它会错误地使它们成为页面大小，这可能是您的全部问题。

如果这不起作用，则添加 pointer-events="none" 以防止 <svg> 元素拦截鼠标点击。