JSFiddle - React, Tailwind, and code Playground

by maxell4o

HTML

<svg id="svg" width="400" height="400">
    <g id="zoom">
        <circle r="40" cx="200" cy="200"></circle>
    </g>
</svg>

CSS

svg {
    background-color:#eee;
}

JavaScript

function setCTM(element, matrix) {
    var m = matrix;
    var s = "matrix(" + m.a + "," + m.b + "," + m.c + "," + m.d + "," + m.e + "," + m.f + ")";
    
    element.setAttributeNS(null, "transform", s);
}

var svgEl = document.getElementById('svg');
var zoomEl = document.getElementById('zoom');
var zoomScale = 1;

svgEl.addEventListener('wheel', function(e) {
    var delta = e.wheelDeltaY;
    zoomScale = Math.pow(1.2, delta/360);
    	console.log(zoomScale);
    var p = svgEl.createSVGPoint();
    p.x = e.clientX;
    p.y = e.clientY;
    
    p = p.matrixTransform( svgEl.getCTM().inverse() );
    
    var zoomMat = svgEl.createSVGMatrix()
            .translate(p.x, p.y)
            .scale(zoomScale)
            .translate(-p.x, -p.y);
            console.log(zoomEl.getCTM(), zoomMat, zoomScale)
    
    setCTM(zoomEl, zoomEl.getCTM().multiply(zoomMat));
});