SVG - 画像のマスキング領域からクリックすると、その画像のクリックがトリガーされ続けます

Question

私は2つの画像を持つSVGを持っています。各画像はマスクされます。私は上の画像1と下の画像2を持っています。に表示されているように、マスクされていない場合は画像2が画像1のマスクされた領域の下半分になります。

次に、両方の画像にクリックリスナーを添付しました。

私の問題は、両方ともマスクされている場合、画像1の下半分をクリックすると、画像2のクリックイベントがトリガーされるということです。なぜなら、画像がマスクされていないと、画像2の一部が画像1の下半分と重なるように見えるからです。しかし、なぜ起こったときに両方がマスクされているのか理解できません。

ここで私はあなたにlive exampleのJSFiddleを残します。何が起きているのかを理解するのを助けることができれば幸いです。

HTML

<div style="display:inline-block;width:155px;height:600px;float:left;"> 
    <svg class="side" width="155" height="600" style="stroke-width:0px;position:absolute;top:0;left:0;z-index:1;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2"> 
     <defs> 
      <mask id="mask_image_001"><ellipse style="fill:#ffffff;" cx="75.54" cy="277.19" rx="50.49" ry="32.28"/></mask> 
      <mask id="mask_image_002"><circle style="fill:#ffffff;" cx="98.34" cy="365.73" r="39.56"/></mask> 
     </defs> 
     <rect x="0" y="0" width="155" height="600" style="fill:#ffffff;"/> 
     <g class="board"> 
      <g id="group_image_001" mask="url(#mask_image_001)"><image id="image_1" width="3000" height="2000" xlink:href="http://i74.imgup.net/image_a3f72.jpg" orig_x="0" orig_y="0" class=" cursor_move" style="opacity: 1;" transform="matrix(0.13561538461538464,-0.03307692307692302,0.03307692307692302,0.13561538461538464,-231,276.9999999999998)"/></g> 
      <g id="group_image_002" mask="url(#mask_image_002)"><image id="image_2" width="3338" height="4550" xlink:href="http://d16.imgup.net/image_b28d1.jpg" orig_x="0" orig_y="0" class=" cursor_move" style="opacity: 1;" transform="matrix(0.06248572762902408,-0.00009288817017963043,0.00009288817017963043,0.06248572762902408,-23.9999999999997,277)"/></g> 
     </g> 
     <image class="bg noevents" xlink:href="http://k81.imgup.net/backgrounddb78.png" x="0" y="0" width="155" height="600"/> 
     <g id="paths_handlers"> 
      <ellipse id="path_image_001" class="path_image noevents" rel="#mask_image_001" style="stroke:none;fill:transparent;" cx="75.54" cy="277.19" rx="50.49" ry="32.28"/> 
      <circle id="path_image_002" class="path_image noevents" rel="#mask_image_002" style="stroke:none;fill:transparent;" cx="98.34" cy="365.73" r="39.56"/> 
     </g> 
    </svg> 
</div> 
<div style="display:inline-block;float:left;"> 
    <input type="button" class="button_switch_background" value="Switch Background" style="margin-bottom:6px;" /><br /> 
    <input type="button" class="button_switch_mask" value="Switch Mask Image 2" style="margin-bottom:6px;" /><br /> 
    Clicked: <span class="status"></span> 
</div> 
<div style="clear:both;"></div> 

JAVASCRIPT

var colors = ["#c00", "#0c0", "#00c"]; 
var color_index = 0; 
$(function(){ 
    $(".button_switch_background").click(function(){ 
     // just switching the background 
     var t = "url(#mask_image_002)"; 
     if ($("svg .bg").css("display") != "none") 
      $("svg .bg").css({display: "none"}); 
     else 
      $("svg .bg").css({display: ""}); 
    }); 
    $(".button_switch_mask").click(function(){ 
     // just switching the mask 
     var t = "url(#mask_image_002)"; 
     $("#group_image_002").attr("mask", ($("#group_image_002").attr("mask") == t)? "_"+t: t); 
    }); 
    $("svg image").click(function(){ 
     console.log($(this).attr("id")); 
     $(".status").html($(this).attr("id")).css({color: colors[(color_index++)%3]}); 
    }); 
}) 

CSS

* { font-family: Arial; } 
.noevents { 
    pointer-events: none; 
} 

私の目標：両方の画像が既にマ​​スクされている場合...画像1の下半分をクリックすると画像1のクリックイベントがトリガーされ、画像2のクリックイベントは発生しません。

ありがとう。

Answer 1

According to the SVG spec、マスクのために透明に見えるピクセルはではなく、はポインタイベントに関して透過的と見なされます。

マスクはバイナリトランジションではありませんが、ピクセル操作であり、完全に透過的でほとんど透過的ではない動作が混乱する可能性があります。その結果、マスクが適用された要素に対しては、マスクが不透明度がゼロになる領域でもポインタイベントをキャプチャする必要があります。

クリックが画像の不可視領域を通過できるようにするには、代わりに<clipPath>を使用するように切り替える必要があります。あなたはあなたが望む行動をしなければなりません。