How to add HTML controls on top of svg element?

Question

Based on the following SO solution, I am displaying an svg element so that occupies the full browser window. This works perfectly fine. However if I also add a button to the window, it no longer handles any of the events (such as a click). I tried to play with the z order of the button so that it is displayed on top of the svg element but it does not fix the problem. Here is the HTML code for my layout:

<html lang="en">
    <head>
         <script src="scripts/jquery-3.2.1.min.js"></script>
         <script src="scripts/snap.svg-min.js"></script>
         <style>
            html, body { margin:0; padding:0; overflow:hidden }
            svg { position:fixed; top:0; left:0; height:100%; width:100% }
         </style>
    </head>
    <body>
        <div>
            <input style="margin-top: 10px;margin-left:10px"; type="button" value="test"/>
        </div>
        <div class="output">
            <svg id="root"></svg>
        </div>
   </body>
</html>

Note: by trying to modify the zindex of the SVG element, then the button becomes clickable again but in that case the SVG element does no longer handle events. I need a solution where both elements can handle events

Any help to fix the css will be greatly appreciated!

yes I mean the SVG element occupying the full window and having overlapping HTML controls (buttons, text fields, etc displayed in the window) — BigONotation, Aug 10 '17 at 09:31
In the previous code sample, the button is displayed correctly but it is no longer "clickable" — BigONotation, Aug 10 '17 at 09:32

BigONotation · Accepted Answer · 2017-08-10T09:50:59.517

OK figured it out:

Added z-indexs to both button and svg so that the button is displayed on top of svg. Note that as explained here, you need to use positive values for the z-index for event handling to work. Also you need to provide a position value for z-index to be taken in account.

<html lang="en">
    <head>
         <script src="scripts/jquery-3.2.1.min.js"></script>
         <script src="scripts/snap.svg-min.js"></script>
         <style>
            html, body { margin:0; padding:0; overflow:hidden }
            svg { position:fixed; z-index:1; top:0; left:0; height:100%; width:100% }
         </style>
    </head>
    <body>
        <div>
            <input style="position:fixed; z-index:2; margin-top: 10px;margin-left:10px"; type="button" value="test"/>
        </div>
        <div class="output">
            <svg id="root"></svg>
        </div>
    </body>
</html>

*"Also you need to provide a position value for z-index to be taken in account."* that was the key for me, thx BigO ! specified position="absolute" for my div and my zIndex worked ! — Goodies, Oct 10 '20 at 00:55

How to add HTML controls on top of svg element?

1 Answers1