CODEWITHSUNDEEP
jqueryhtmlcsssvg
Nomistake
Nomistake

Reputation: 863

SVG: Click underlying svg

I have this page with 2 svg images on it. It seems the svg (item1) image is overlapping and preventing to click on the underlying svg (item2)

enter image description here

I tried using pointer-events on the elements but i cant seems to get it working on the underlaying item2.

Maybe de svg is still blocking the 'click event'

This is the code:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<body>
    <div id="main">
        <div id="item1">
            <svg class="crossSvg">
                <line class="verticalLine" x1="50%" y1="0" x2="50%" y2="100%"></line>
                <line class="horizontalLine" x1="0" y1="50%" x2="100%" y2="50%"></line>
                <rect class="itemSquare" x="50%" y="50%" width="10" height="10" transform="translate(-5,-5)"/>
                <text class="itemTitle" x="50%" y="50%" transform="translate(10,-10)">item1</text>
            </svg>
            <svg class="closeSvg">
                <rect class="closeSquare" x="0" y="0" width="10" height="10"/>
                <line x1="90%" y1="50%" x2="91%" y2="51%"></line>
            </svg>
        </div>
        <div id="item2">
            <svg class="crossSvg">
                <line class="verticalLine" x1="50%" y1="0" x2="50%" y2="100%"></line>
                <line class="horizontalLine" x1="0" y1="50%" x2="100%" y2="50%"></line>
                <rect class="itemSquare" x="50%" y="50%" width="10" height="10" transform="translate(-5,-5)"/>
                <text class="itemTitle" x="50%" y="50%" transform="translate(10,-10)">item2</text>
            </svg>
            <svg class="closeSvg">
                <rect class="closeSquare" x="0" y="0" width="10" height="10"/>
                <line x1="90%" y1="50%" x2="91%" y2="51%"></line>
            </svg>
        </div>
    </div>
</body>

JAVASCRIPT:

$( document ).ready(function() {
    $('.itemSquare').on('click', function(){
        alert("Hello! I am an alert box!!");
    });
});

CSS:

#main{
    width: 100vw;
    height: 100vh;
}

#item1, #item2{
    position: absolute;
    width: 200vw;
    height: 200vh;
}
/* ---- positioning items ---- */
#item1{
    left: -90vw;
    top: -80vh;
    z-index:100;
}

#item2{
    left: -50vw;
    top: -70vh;
}
/* ---- item content ---- */
.itemContent{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90vw;
    overflow: hidden;
    padding: 5px;
}

/* ---- SVG's ----- */
.crossSvg{
    position: absolute;
    width: 100%;
    height: 100%;
    background: none;
    pointer-events: all;
}

.verticalLine, .horizontalLine {
    stroke: black; 
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.itemSquare{
    display: hidden;
    fill: black;
    stroke: black;
    stroke-width: 1;
    shape-rendering: crispEdges;
    pointer-events: fill;
}

.closeSvg{
    position: absolute;
    top: 50%;
    left: 95%;
    margin-top: -5px;
}

.closeSquare{
    fill: black;
    stroke: black;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

I have put this in this fiddle: https://jsfiddle.net/fme21qx9/3/

Upvotes: 2

Views: 1750

Answers (1)

kano
kano

Reputation: 5920

You need to disable the pointer-events for both the wrapper element (div#item1) and the SVG (svg.crossSvg), since SVGs have a different pointer context.

If you add this to the end of your CSS, it works fine:

#item1 {
  pointer-events: none;
}
#item1 .crossSvg {
  pointer-events: none;
}

.itemSquare {
  pointer-events: all;
}

(Although styling with IDs in your selector isn't a best practise)

EDIT: Updated your fiddle to reflect the changes in the answer and our discussion in the comments.

Upvotes: 4

Related Questions