From 9c34e15c47cf3578adeff41693a62061a25fdcde Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Tue, 11 Jun 2024 14:58:29 -0700 Subject: Update implementation to account for WebKit bug getScreenCTM() on WebKit does not reflect transformations applied to an ancestor (see bug https://bugs.webkit.org/show_bug.cgi?id=209220), so instead of transforming the root - JavaScript/CSS Pan & Zoom Demo + SVG Element Pan & Zoom Demo -

Pan & Zoom an Element with CSS/JavaScript

Pan & Zoom SVG Element with CSS/JavaScript

- Click and drag on the image to pan. Use the mouse wheel - to zoom in and out. + Click and drag the image to pan. Use the mouse wheel to zoom in and out.

- -

diff --git a/src/app.js b/src/app.js index 3afc329..30b4467 100644 --- a/src/app.js +++ b/src/app.js @@ -2,14 +2,7 @@ import zoom from './modules/zoom.js'; import pan from './modules/pan.js'; const optionalZoomFactor = 0.1, - container = document.querySelector('.container'), - object = document.querySelector('object'), - img = document.querySelector('img'), - button = document.querySelector('button'); - -function reset(elements) { - elements.forEach(el => el.removeAttribute('style')); -} + object = document.querySelector('object'); // If embedding an SVG using an