CODEWITHSUNDEEP
csshtmlsvgz-index
Catpixels
Catpixels

Reputation: 385

How to create 2 separate SVG without blocking other div elements?

I have a page that's divided into 3 sections. A top bar with several buttons, a large middle section and a bottom bar with more buttons. And on top of everything several floating windows that will open and close depending on the buttons clicked (ignorable for this problem).

The requested structure is the middle section must be an empty div that will load several other pages through jquery. Some of those pages have interactive elements, so it must accept mouse events, despite the div having the lowest z-index of all the page elements.
The buttons on the top and bottom bars must all be svg elements, both because of the vectorial properties and the occasional odd shapes. And they must have a higher z-index than the middle div at all times.

My problem is the svg is covering the middle div and blocking all interactions (in this case a simple alert when you click on the div), although none of the visual elements overlap.
I've tried to call 2 different svgs, one for each bar, but the 2nd never shows up. I've also tried calling the 2 svgs inside a main svg and include the div inside as well, but it didn't work too.

This is an example of how it currently looks (the absolute positions, z-indexes and styles are defined in a 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>

This was the 1st solution attempt:

 <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>

And this was the 2nd solution attempt:

 <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>

Upvotes: 0

Views: 842

Answers (1)

Robert Longson
Robert Longson

Reputation: 124179

Firstly you should specify width and height attributes for the <svg> elements. If you're using Chrome it incorrectly makes them the size of the page if you omit such attributes and this may be your entire issue.

If that doesn't work then add pointer-events="none" to prevent the <svg> elements intercepting mouse clicks.

Upvotes: 2

Related Questions