Web Dev Solutions

Catalin Mititiuc

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 element, we can only transform a child element --- public/assets/css/style.css | 37 ++++----------------- public/assets/images/41156165560-4438592e93-o.webp | Bin 585068 -> 0 bytes public/assets/images/image.svg | 20 +++++------ public/index.html | 19 +++-------- 4 files changed, 20 insertions(+), 56 deletions(-) delete mode 100644 public/assets/images/41156165560-4438592e93-o.webp (limited to 'public') diff --git a/public/assets/css/style.css b/public/assets/css/style.css index db47790..0596f4e 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,40 +1,17 @@ body { text-align: center; - max-width: 100vw; + max-height: 100vh; + display: flex; + flex-direction: column; + margin: 0; } -.container { +object { padding: 0; - max-width: 586.033px; - max-height: 586.033px; - margin: 0 auto; - overflow: hidden; + margin: 5px; border: 1px solid steelblue; background-color: gray; -} - -img, object { touch-action: none; -} - -img { - max-width: 100%; - border: 1px solid silver; - transform: scale(0.9); -} - -.container object, .container.switch img { display: block; -} - -.container img, .container.switch object { - display: none; -} - -button .button-text.raster, button.switch .button-text.svg { - display: none; -} - -button.switch .button-text.raster { - display: inline; + min-height: 0; } diff --git a/public/assets/images/41156165560-4438592e93-o.webp b/public/assets/images/41156165560-4438592e93-o.webp deleted file mode 100644 index 2ad3fa4..0000000 Binary files a/public/assets/images/41156165560-4438592e93-o.webp and /dev/null differ diff --git a/public/assets/images/image.svg b/public/assets/images/image.svg index 29f9306..a823339 100644 --- a/public/assets/images/image.svg +++ b/public/assets/images/image.svg @@ -1,22 +1,20 @@ - - + + + + + + diff --git a/public/index.html b/public/index.html index 35a3030..d97baee 100644 --- a/public/index.html +++ b/public/index.html @@ -3,28 +3,17 @@ - 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.

-

- -

- -
- - -
+ -- cgit v1.2.3