svg - Clicking On-or-Through Image is Browser-Dependent

Question

I have found a difference between how Firefox and Chrome handle clicking near an image that I need to fix. I have a rect with an image occupying roughly the top 65%. I preserve the aspect ratio of the image and so it appears narrower than the full rect, which is perfect for what I need.

However, when I click near to the image, in the margin space either side of it, Firefox says I have clicked on the rect whereas Chrome says that I have clicked on the image. Inspecting the elements, I see that the image element spans the full width of the rect in both cases, but it is the functionality in Firefox that I need (as though I'm clicking "through" those image margins).

This is better explained with an example. The code below shows one rect and a narrow image in the top 65%. If I click either side of the image in Firefox, it says that the event.target.nodeName is "use" (I have the rect in a <g>) whereas Chrome says it is "image".

function clickHandler(ev) {
    ev = ev || window.event;
    alert (ev.target.nodeName);
}

text {
    text-anchor: middle;
    font-size: 10px;
    font-weight: bold;
    font-family: "Times New Roman";
    pointer-events: none;
}

.m {
    stroke: dimgray;
    stroke-opacity: 1.0;
    stroke-width: 1.5;
    fill-opacity: 1.0;
    fill: white;
}

<svg id="TreeTest" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
    <g id="G-Box">
    <rect width="80" height="80" rx="5" ry="5"/>
    </g>
</defs>

<g id="HenryProctor">
<use tabindex="0" xlink:href="#G-Box" class="m" x="50" y="50" onclick="clickHandler(evt);">
</use>

<text x="90" y="106" dy="1em">Henry</text>
<text x="90" y="106" dy="2em">Proctor</text>

<image x="52.5" y="52.5" width="75" height="51.5" xlink:href="https://parallaxviewpoint.com/Images/Proctor_Henry_b1833.jpg" preserveAspectRatio="xMidYMin meet" onclick="clickHandler(evt);">
</image>

</g>

</svg>

question from:https://stackoverflow.com/questions/65886222/clicking-on-or-through-image-is-browser-dependent

Answer 1

That difference is an interesting quirk that I hadn't noticed before.

Although Firefox's behaviour seems the most useful in this case, I think that Chrome's behaviour follows the spec more accurately. The blank areas on each side of the image are still technically part the "fill" of the <image> element. So clicking there probably should return the "image".

Do you care whether the user clicks on the visible part of the image, or the blank areas beside it? If not, then you could just tell the browser to ignore all click events on the <image> element using:

pointer-events="none"

Now when you click anywhere on the image, in Chrome, you get "use".

function clickHandler(ev) {
    ev = ev || window.event;
    alert (ev.target.nodeName);
}

text {
    text-anchor: middle;
    font-size: 10px;
    font-weight: bold;
    font-family: "Times New Roman";
    pointer-events: none;
}

.m {
    stroke: dimgray;
    stroke-opacity: 1.0;
    stroke-width: 1.5;
    fill-opacity: 1.0;
    fill: white;
}

<svg id="TreeTest" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
    <g id="G-Box">
    <rect width="80" height="80" rx="5" ry="5"/>
    </g>
</defs>

<g id="HenryProctor">
<use tabindex="0" xlink:href="#G-Box" class="m" x="50" y="50" onclick="clickHandler(evt);">
</use>

<text x="90" y="106" dy="1em">Henry</text>
<text x="90" y="106" dy="2em">Proctor</text>

<image x="52.5" y="52.5" width="75" height="51.5" xlink:href="https://parallaxviewpoint.com/Images/Proctor_Henry_b1833.jpg" preserveAspectRatio="xMidYMin meet" onclick="clickHandler(evt);"
       pointer-events="none">
</image>

</g>

</svg>