我有一个分为 3 个部分的页面。一个带有多个按钮的顶部栏,一个较大的中间部分和一个带有更多按钮的底部栏。最重要的是,几个 float 窗口将根据单击的按钮打开和关闭(对于此问题可忽略)。
请求的结构是中间部分必须是一个空的 div
,它将通过 jquery 加载其他几个页面。其中一些页面具有交互元素,因此它必须接受鼠标事件
,尽管 div 在所有页面元素中具有最低的 z-index
。
顶部和底部栏上的按钮都必须是 svg
元素,因为矢量属性和偶尔的奇怪形状。而且它们的 z-index
必须始终高于中间的 div。
我的问题是 svg 覆盖了中间的 div 并阻止了所有交互(在这种情况下,当您单击 div 时会出现一个简单的警告),尽管没有任何视觉元素重叠。
我试过调用 2 个不同的 svg,每个小节一个,但第二个从未出现。我也尝试过在主 svg 中调用 2 个 svgs 并将 div 也包含在其中,但它也没有用。
这是它当前外观的示例(绝对位置、z 索引和样式在 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>
最佳答案
首先,您应该为 <svg>
指定宽度和高度属性元素。如果您使用的是 Chrome,如果您省略此类属性,它会错误地使它们成为页面的大小,这可能是您的全部问题。
如果这不起作用,则添加 pointer-events="none"以防止 <svg>
拦截鼠标点击的元素。
关于css - 如何在不阻塞其他 div 元素的情况下创建 2 个独立的 SVG?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16764398/