0
私はこのページに2枚のsvg画像があります。 それはに取り組んで取得するようだ、私は要素上のポインタ・イベントを使用してみましたが、私はカント（ITEM1）画像が（ITEM2）SVG：下にあるSVGをクリックしてください
を重ね、基礎となるSVGをクリックして防止されるSVGようですアイテム2の下にある。
たぶんデSVGはまだこれがコードである 'イベントをクリック'
をブロックしている：
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;
}
私はこのフィドルでこれを入れている： https://jsfiddle.net/fme21qx9/3/
あなたは100％権利があり、下にあるsvgをクリックすることはできません。 – skobaljic
@skobaljic私は知っていますが、なぜそうではなく、どうすればいいのでしょうか... – Nomistake
あなたはこのようにすることはできません。クリックイベントを親要素にバインドし、マウスの位置から計算するか、必要に応じてz-indexを使用してSVGを並べ替える（Photoshopのレイヤーの選択など）。ブラウザーは、SVG（レイヤー）をクリックしたいと思っていることを知ることができません。 – skobaljic