I go the the Regular DOM Object demo I edit the HTML in page, add a div and make i

This should be fixed now. Demo: <a href="http://jsbin.com/siyipif/1/edit?html,output"

Zoom location center wrong if zoomable element not top on page about panzoom HOT 7 CLOSED

anvaka commented on August 19, 2024

Zoom location center wrong if zoomable element not top on page

from panzoom.

Comments (7)

anvaka commented on August 19, 2024

Could you please give an example here https://jsfiddle.net or somewhere else where I could test it?

from panzoom.

daverodal commented on August 19, 2024

yes It seems to work now, i will reverify that it's broken.....

If it is I will give example, thanks again

from panzoom.

TrevorSundberg commented on August 19, 2024

The example fiddle that was given actually has an invalid zoom point:
https://jsfiddle.net/uwxcmbyg/

If you resize the windows (especially shrink the javascript window to the left) then it will be very obvious (at least it is on Chrome).

from panzoom.

Schnark commented on August 19, 2024

As far as I can tell, this has something to do with the viewBox attribute. I can reproduce with the following files:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Panzoom test</title>
<script src="panzoom.min.js"></script>
<script>
window.addEventListener('load', function () {
	panzoom(document.getElementById('container'));
});
</script>
</head>
<body>
<svg viewBox="0 0 800 500">
<g id="container"><circle cx="150" cy="150" r="40"/></g>
</svg>
</body>
</html>

Or with pure SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	viewBox="0 0 800 500">
<defs>
<script xlink:href="panzoom.min.js"/>
<script>//<![CDATA[
window.addEventListener('load', function () {
	panzoom(document.getElementById('container'));
});
//]]></script>
</defs>
<g id="container"><circle cx="150" cy="150" r="40"/></g>
</svg>

When I open any of these files in my browser and try to zoom with the mouse cursor over the center of the circle, I'd expect the circle to stay in its place and just zoom, but it actually also moves.

When I remove the viewBox attribute, zooming works as expected in both cases.

from panzoom.

anvaka commented on August 19, 2024

Yup. viewBox is causing the bug. Not sure yet how to fix it.

from panzoom.

anvaka commented on August 19, 2024

This should be fixed now. Demo: http://jsbin.com/siyipif/1/edit?html,output

from panzoom.

daverodal commented on August 19, 2024

thanks anvaka this is wonderful news

from panzoom.

Recommend Projects