SVG elements to zoom whole SVG group on click or mouseover

I would like to use the circles within my SVG file to trigger a zoom in centred on the circle. I have got it working with a div acting as the trigger for the zoom but if I instead apply id="pin" to one of the circle elements within the SVG it no longer zooms in. Can anyone tell me why this is?

Is there a better way for me to achieve what I am trying to do? Ideally, I would like it to be possible to click to zoom and then to access other interactivity within the SVG while zoomed in. If this is not possible is there a simple way to zoom and pan an SVG and to be able to access SVG interactivity while zoomed?

If I have missed something obvious please forgive me, I’m very much still learning the basics!

Rough example: CodePen link


    <div id="pin">click to trigger zoom</div>
  
    <div class="map" id="mapFrame">

        <svg class="image" id="mapSVG" version="1.1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1442.5"" style="
            enable-background:new 0 0 1920 924.9;" xml:space="preserve">
            <g id="Layer_7" data-name="Layer 7">
                <image width="1800" height="1350" transform="translate(0) scale(1.069)" opacity="0.3"
                    xlink:href="https://media.npr.org/assets/img/2020/07/04/seamus-coronavirus-d3-world-map-20200323_wide-a3888a851b91a905e9ad054ea03e177e23620015.png" />
            </g>

            <g id="one">
                <circle  cx="929.664" cy="944.287" r="81.191"/>
            </g>
            <g id="two">
                <circle  cx="638.164" cy="456.863" r="81.191" />
            </g>
            <g id="three">
                <circle  cx="1266.164" cy="498.868" r="81.191" />
            </g>

        </svg>

    </div>
    <script src="app.js"></script>

svg {
  width: 100%;
  height: auto;
}

#pin {
  position: absolute;
  height: 65px;
  width: 75px;
  top: 300px;
  left: 550px;
  padding: 10px;
  background-color: yellow;
}

let imgElement = document.querySelector('#mapFrame');
let pinElement = document.querySelector('#pin');

pinElement.addEventListener('click', function (e) {
    imgElement.style.transform = 'translate(-' + 0 + 'px,-' + 0 + 'px) scale(2)';
    pinElement.style.display = 'none';
});

imgElement.addEventListener('click', function (e) {
    imgElement.style.transform = null;
    pinElement.style.display = 'block';
});

Solution

When you click on the circle, you are also clicking on the background image as well, triggering two events which is essentially cancelling the zoom. You can see this if you place alert('click 1'); and alert('click 2'); in your listeners.

This doesn't happen on the #pin element because it's outside background div and avoids the event bubbling up. This is solved by adding event.stopPropagation();

Code from your CodePen:

let imgElement = document.querySelector('#mapFrame');
let pinElement = document.querySelector('#one'); //changed to #one

pinElement.addEventListener('click', function (e) {
    imgElement.style.transform = 'translate(-' + 0 + 'px,-' + 0 + 'px) scale(2)';
    pinElement.style.display = 'none';
  event.stopPropagation(); //added to prevent bubbling
});

imgElement.addEventListener('click', function (e) {
    imgElement.style.transform = null;
    pinElement.style.display = 'block';
});