To answer my own question...
The position, scale and orientation is modified on the SVG object - this is where to look to save and restore the state of the SVG.
The scale and position are in the viewBox attribute, orientation in data-svg-origin and transform, for example in the demo shown:
<svg id="map" class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="173.169 19.9044 1000 1000" style="">
<title>Demo Square</title>
<g id="viewport" data-svg-origin="488.94370908783253 572.0179250471222" transform="matrix(-0.80649,0.59125,-0.59125,-0.80649,1243.48156,500.66229)" style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px 0px;">
...
</svg>
Add a function to store these values in session, or elsewhere, for example:
//
// Update saved map state in session
// ===========================================================================
function updateCurrentTransformation() {
var savedMapState = new Object();
savedMapState.svgViewBox = svg.getAttribute("viewBox");
savedMapState.viewportOrigin = viewport.getAttribute("data-svg-origin");
savedMapState.viewportTransform = viewport.getAttribute("transform");
sessionStorage.setItem("savedMapState", JSON.stringify(savedMapState));
//console.log("VBX: " + savedMapState.svgViewBox + " VPO: " + savedMapState.viewportOrigin + " VPT: " + savedMapState.viewportTransform);
}
Call this function whenever the map changes - for example at the end of the drag:
var draggedSvg = Draggable.create(proxy, {
...
onDragEnd: function () {
updateCurrentTransformation();
},
});
At page initialisation, read these values and modify the SVG attributes with saved values if any:
// Get saved map state - will exist if map moved
var savedMapState = JSON.parse(sessionStorage.getItem("savedMapState"));
if (savedMapState != null) {
//console.log("Session exists")
if (savedMapState.svgViewBox != null) {
svg.setAttribute("viewBox", savedMapState.svgViewBox);
};
if (savedMapState.viewportOrigin != null) {
viewport.setAttribute("data-svg-origin", savedMapState.viewportOrigin);
};
if (savedMapState.viewportTransform != null) {
viewport.setAttribute("transform", savedMapState.viewportTransform);
};
}
Finally, remove the stored session when required, fore example when the SVG is set to original size etc:
//
// RESET VIEWPORT
// ===========================================================================
function resetViewport() {
...
// remove saved map sate session values
sessionStorage.removeItem("savedMapState");
}
A working demo and the code referred to is here
