Zoom on mouse position inside scrollable DIV

Think Google Maps here. I have a stack of SVGs contained inside of a div, in the structure seen below:

<div id="host" style="overflow:scroll">
  <div id="child1" style="display:block;height:100px;width:100px;">
     <svg></svg>
  </div>
  <div style="display:block;height:100px;width:100px;">
    <svg></svg>
  </div>
  ...
</div>

I currently have some javascript code that happens on the mouse-wheel event. In increments of 0.25 starting at 0.25, you can zoom each child div inside #host using the css property { zoom: ??? } depending on your zoom level. The zoom is de/incremented by 0.25 on the mousewheel, that is all working great. This is the code after mouse-wheel event and de/incrementing. Bounding Length is a static field determined by the content. All child divs are the same size, all of them are square.

var host = document.getElementById('host');
for(var i = 0; i < host.childElementCount; i++){
    var boundingLength = this.baseHeight < this.baseWidth ?
        this.baseWidth: this.baseHeight;
    var div = host.children.item(i);
    div.setAttribute('style',`zoom:${this.getCalculatedZoom()};height:${boundingLength}px;width:${boundingLength}px;`)
}

However, the problem I'm running into is the content inside #host is moving down-right every time. I would like to zoom in on a the mouse position of #host, so that the same SVG content underneath stays on screen.