Determining visible center of SVG as rotation origin while panning and zooming

Question

I'm developing an SVG viewer, using svg-pan-zoom library to pan and zoom the SVG.

What I want What I want in the end is to be able to pan/zoom to a specific point in the SVG and be able to rotate from that point (and be able to repeat this process). The red circle (when clicking or panning) is just a visual debugging tool

• 1. codepen example with click point centering & rotation origin
• 2. codepen example with drag/zoom centering & rotation origin

SVG structure:

<svg id="svgElement" viewBox="0 0 500 500">
  <g id="svg-pan-zoom-container"> <!-- SVG-pan zoom translations are applied to this group -->
    <g id="group" transform="rotate(60 250 250)">
      <rect x="225" y="225" width="20" height="20" fill="blue" />
    </g>
  </g>
</svg>

Problem

Updating the rotation origin results in the SVG jumping. I tried compensating by panning to the coordinates after updating the origin. I've tried multiple ways of determining the pan coordinates. Updating the transform attribute while panning works fine when rotation is 0, but for ex. when rotation is 180 dragging results in the SVG moving in the opposite direction.

In the first example (with the click point as center and origin) seems to work, so I'm kind of lost why it won't work with panning.

Questions

• Would another zooming/panning approach work better? I've considered implementing my own solution.
• Is the a better approach to always rotating from the visual center?
• Am i stupid? :(