SVG: Klicken Sie auf zugrunde liegenden Svg

Ich habe diese Seite mit 2 SVG-Bildern darauf. Es scheint, die svg (item1) Bild überlappt und auf dem darunterliegenden svg (item2)SVG: Klicken Sie auf zugrunde liegenden Svg

Ich habe versucht, Zeiger-Ereignisse auf den Elementen klicken zu verhindern, aber ich kann nicht so scheint es auf der Arbeit zu bekommen Artikel 2 unterlegen.

Vielleicht de svg blockiert noch die 'Click-Ereignis'

Dies ist der 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; 
}

Ich habe dies in dieser Geige setzen: https://jsfiddle.net/fme21qx9/3/

Quelle

2017-09-18 Nomistake

Sie sind 100% richtig und Sie können nicht auf die darunterliegende Svg klicken. – skobaljic

@skobaljic Ich weiß, aber warum nicht und wie kann ich es funktionieren lassen ... – Nomistake

Sie können nicht auf diese Weise. Du musst das click -Ereignis an ein Elternelement binden und dann von der Mausposition aus berechnen ... oder deine SVGs irgendwie mit dem Z-Index nach Bedarf neu anordnen (wie: Ebenen in Photoshop auswählen). Der Browser kann nicht wissen, auf welche SVG (Ebene) Sie klicken wollten, da sie alle übereinander liegen - also die oberste zurückgibt. – skobaljic

Sie müssen die Zeiger-Ereignisse sowohl für das Hüllenelement (div#item1) und der SVG (svg.crossSvg) deaktivieren, da SVGs einen anderen Zeiger Kontext haben.

Wenn Sie dies das Ende Ihrer CSS hinzufügen, es funktioniert gut:

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

.itemSquare { 
    pointer-events: all; 
}

(Obwohl Styling mit IDs in Ihrem Selektor ist keine bewährte Methode)

EDIT: Ihre fiddle aktualisiert, um die Änderungen in der Antwort und unsere Diskussion in den Kommentaren zu reflektieren.

Quelle

2017-09-18 20:13:08 Kano

es funktioniert jetzt sehr gut! Vielen Dank. – Nomistake

"Obwohl das Formatieren mit IDs in Ihrem Selektor keine bewährte Methode ist" Warum nicht? Ich dachte, wenn ein Element nur einmal im DOM existiert, war es am besten, eine ID anstelle einer Klasse zu verwenden? Kläre mich auf! – Nomistake

Es scheint zu funktionieren, ohne Zeigerereignisse auf dem crossSvg zu deaktivieren – Nomistake

SVG: Klicken Sie auf zugrunde liegenden Svg

Antwort

Verwandte Themen