Svgpanzooming with some HTML (probably div) elements inside a SVG - svgpanzoom

Question

Firstly, thanks to whoever developed and help maintain svg-pan-zoom. It's been really helpful. Big props :)
Anyway, I have a quick question to the svg-pan-zoom community. Is it at all possible to use svg-pan-zoom on a svg that has a HTML div inside of it (which will be inside a foreignObject)?
I need a HTML element (a form specifically) to 'follow' the movements of this svg when it's being panned and zoomed around. Its position relative to the svg elements shouldn't change, it has to move with them.
I have tried doing it completely separately (separate code to control the panning of the HTML form) but it's very gimmicky and I ran into some technical issues I'd rather not deal with. (For example, moving the div doesn't move the svg with it.) I'd really appreciate it if someone could tell me if svg-pan-zoom supports foreignObjects, and what to do to move HTML elements with the svg.
Thanks in advance.

Answer 1

To follow up, I ended up just disabling the default zoom and pan options, and then wrote a function to pan both the svg and the form element so they'd move together.
(Some of this code was inspired by another Stack Exchange answer that I looked up briefly and can no longer find. I'd reference it later if I remember.)
Like most solutions, solving the problem this way brought up more issues. For instance, the form moves around perfectly with the mouse, but for some reason the function panBy(xpixel, ypixel) pans by way too much (a tiny mouse movement throws it out of the page.)
I guess this is my solution, though it has that issue. I'd been stuck on this so long and would appreciate it a ton of someone can help me figure out why panBy is acting weird.
// Pan when mouse is dragged
$(window).on('mousedown', function(event){
var initClick = {
x : event.pageX,
y : event.pageY
};
var initPosition = $('#form1').offset();
var handlers = {
mousemove : function(event){
panZoom.panBy({x: event.pageX - initClick.x, y: event.pageY - initClick.y});
$('#form1').css({"top": initPosition.top + (event.pageY - initClick.y),
"left": initPosition.left + (event.pageX - initClick.x)});
},
mouseup : function(event){
$(this).off(handlers);
}
};
$(document).on(handlers);
});