Question

我有一个内部有两个图像的SVG。每个图像都被屏蔽。我的图像1位于顶部，图像2位于下方。如果没有蒙版，图像2会到达图像1的蒙版区域的下半部分，如this image所示。

然后我为这两个图像添加了一个点击监听器。

我的问题是，当它们都被屏蔽时，如果我点击图像1的下半部分，则触发图像2的点击事件。我认为这是因为如果图像没有被遮挡，图像2的一部分可见也会与图像的下半部分重叠。但我不明白为什么，因为它们都会在发生这种情况时被掩盖。

在这里，我给你一个带有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>。然后你应该有你想要的行为。

SVG - 从图像的遮罩区域单击，继续触发该图像的单击

1 个答案: