Capture pointer when panning svg

index.js

@@ -419,10 +419,9 @@ svg.addEventListener('wheel', e => {
   // newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY;
 
   svg.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`);
-  console.log('viewbox after wheel', svg.viewBox.baseVal);
-}, { passive: false });
+});
 
-svg.addEventListener('mousedown', e => {
+svg.addEventListener('pointerdown', e => {
   const minPanDistanceThreshold = 5;
 
   let dist, ctm,
@@ -431,7 +430,7 @@ svg.addEventListener('mousedown', e => {
       startPt = new DOMPoint(e.clientX, e.clientY),
       movePt = new DOMPoint();
 
-  function mouseMove(e) {
+  function pointerMove(e) {
     movePt.x = e.clientX;
     movePt.y = e.clientY;
     dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);
@@ -443,6 +442,7 @@ svg.addEventListener('mousedown', e => {
     }
 
     if (pan) {
+      svg.setPointerCapture(e.pointerId);
       ctm = svg.getScreenCTM().inverse();
 
       const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)),
@@ -453,11 +453,12 @@ svg.addEventListener('mousedown', e => {
     }
   }
 
-  function mouseUp() {
-    document.removeEventListener('mousemove', mouseMove);
-    svg.removeEventListener('mouseup', mouseUp);
+  function pointerUp(e) {
+    svg.releasePointerCapture(e.pointerId);
+    svg.removeEventListener('pointermove', pointerMove);
+    svg.removeEventListener('pointerup', pointerUp);
   }
 
-  document.addEventListener('mousemove', mouseMove);
-  svg.addEventListener('mouseup', mouseUp);
+  svg.addEventListener('pointermove', pointerMove);
+  svg.addEventListener('pointerup', pointerUp);
 });