I am using this SVG Pan Zoom Library: https://github.com/bumbu/svg-pan-zoom

I have prepared a CodePen for you: https://codepen.io/ItsBenedict/pen/vYMbjpK

If you click on a category, the group should be centered to the viewport. The relevant code I am using here is starting at line 36.

var button1 = document.getElementById("cat-1")
button1.addEventListener("click", function() {
    const { left, width, top, height } = button1.getBoundingClientRect();
    customPanBy({x: width/2 - left, y: height/2 - top});
});

At the moment the group is moving to the top left so I guess the calculations are wrong. It looks like I need to use the getSizes from this plugin but I don’t know how to use it. Here is another question but I am not really experienced with JavaScript, so I can’t get it to work by myself: svg-pan-zoom pan/zoom to any object

If anyone could help me, it would me much appreciated!