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

    How to replace a Font Awesome icon within link text with a different icon on link click?

    How to prevent css loaded with query being applied to whole page?

    How can a user add content to a website? [closed]

    Javascript/CSS, How to keep changes?

    How to adjust the width of a DIV per height using CSS

    How to get Sub Menu to right align using CSS

    How to reverse the float order of heading & body with CSS?

    How to put all of the images from folder into CSS box

    How to go about making an image move up in the div on hover

    How can I remove “border-top-width” css style?

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How to disable correctly CSS3 transition property when needed

    How to make a grid with one style?

    How to close a modal box after form submit?

    How can I center Twitter-Bootstrap 3 navbar buttons?

    CSS height as a variable and how to calculate 60% of total screen size

    How can I set different gradients as background, each time user refreshes?

    how do I apply a class to the header cell for a column in slickgrid

    How to target table with ID?

    How to display a division over other element

    How to reference nested classes with css?

    How do I change the css of a different element on hover?

    How to import the css file by media queries by condition [duplicate]

    How to zoom in to a specific point smoothly with CSS?

    html web shows header only in mobile view

    How to view browser's calculated CSS specificity?

    How to properly style current_page_item based from theme

    How to show a background image over foreground image using CSS

    CSS: How to set image width larger than the container's [closed]

    How to select multiple CSS parent and descendant groups efficiently