Clipping/Masking Sub-Parts of SVG Linked Image - html

Question

I have a massive image of a map embedded in an SVG, which is much larger than the browser window and centered on the screen.
<svg id='map' width='7192' height='3912' viewBox='0 0 7192 3912' version='1.1'>
<image width='7192' height='3912' x='0' y='0' preserveAspectRatio='none'
xlink:href='map.jpg' />
<!-------------------->
<!-- paths are here -->
<!-------------------->
</svg>
There are two paths. One path outlines a building. The other path outlines a sub-region on the map.
The user can click on these paths, at which point that specific path will gradually be centered in the middle of the screen using a transition.
Once the path is centered, what I would like to do is clip or mask everything outside of that path, so that the only visible part of the image/map is the path that was selected and centered.
Does anybody know how to do this?
I've tried using clipPath natively in HTML and also applying it to the SVG in CSS, both of which don't seem to work. Either that or I'm doing something wrong.
Here is a working demo of the project.
The building can be located near the top middle section of the map. The sub-region, which is easier to locate considering its size, is located in the bottom right hand corner of the map. If you mouseenter them, the paths will fill. If you click on them, they will be centered on the screen.

Answer 1

You can re-use the clip path content as a target area for pointer events if you combine sibling selectors with the right value for pointer-events. Setting this property will both define when CSS pseudo-classes apply and which mouse events will be captured. Your centering code could be triggered by a click event.
document.querySelectorAll('.highlight').forEach(use => {
use.addEventListener('click', e => {
alert(use.id + " was clicked.");
});
});
.highlight {
fill: none;
pointer-events: fill;
}
image {
pointer-events: none;
}
#h1:hover ~ image {
clip-path: url(#clip1);
}
#h2:hover ~ image {
clip-path: url(#clip2);
}
<svg width="500" height="331">
<clipPath id="clip1">
<rect id="path1" x="20" y="20" width="80" height="80" />
</clipPath>
<clipPath id="clip2">
<circle id="path2" cx="400" cy="200" r="80" />
</clipPath>
<!-- use elements must be direct siblings preceding the image -->
<use class="highlight" id="h1" xlink:href="#path1" />
<use class="highlight" id="h2" xlink:href="#path2" />
<image xlink:href="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="500" height="331" />
</svg>