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


Tags: css,html5,html,svg,z-index

Problem :

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>


Solution :

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.


    CSS Howto..

    Chrome inspector not showing body outline correctly

    How to make a div one on the top and one on the bottom touching

    HTML/CSS How do I get 2 completely independant scrollbars?

    How to change the selection tip of custom cursor using css

    How to remove dot '.' from CSS list-style:decimal [duplicate]

    How to Highlight a list item after user clicks on link

    How to change image css after rotating it in JS?

    How to add labels for multiple textboxes inside 1 li element

    How to extend the length of a page through CSS?

    How do I avoid multiple jquery dropdown boxes interfering with eachother

    How to use css to find a list element in css alone, i.e. not be css3 dependent?

    How to link after the CSS-Animation?

    How to add this background-image effect to a div?

    How to select div with id nested in another div with class in css

    How to link to a CSS if a certain condition happens?

    how to align 5 div side by side in center using css?

    How to make smooth animation in css?

    How to achieve this button-border effect with CSS? (image included)

    How to set a menu as selected while selecting its subchild

    How to access CSS generated content with JavaScript

    How to make letters in SVG to be animatable individually?

    How do I make a nested
    expand to its contents?

    How to modify CSS when requirements change?

    How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

    How to code a drop down menu in css?

    How to get a reference to id=“xxx.yyy” in CSS?

    How to figure out if CSS transition is about to happen?

    Ask Toolbar preventing Bootstrap Modal to show

    using css modules how do I define more than one style name

    CSS parser/abstracter? How to convert stylesheet into object