Accepted answer

You're basically there. To get the zoom behaviour to work, transform a g element directly underneath the svg instead of the svg itself -- that has no effect. To prevent dragging of the nodes on SVG drag, you can use the nodedrag variable you've set up already -- just set it to true on dragstart and false on dragend.

Complete jsfiddle here.


i know this specific question has been answered, but as this is still the top question on google i would like to add another answer for the more recent 'feature' introduced by update 73 of Google Chrome which broke zoom for me (and i lost 4 hours migrating from v5 to v6 and debugging why is zoom not working)

the fix for me was to add this line :

window.addEventListener("wheel", ()=> {passive: false});

Related Query

More Query from same tag