From 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sat, 20 Apr 2024 19:34:06 -0700
Subject: Use CSS transformations instead of manipulating the viewBox
---
public/assets/css/style.css | 40 ++++++++
public/assets/images/41156165560-4438592e93-o.webp | Bin 0 -> 585068 bytes
public/assets/images/image.svg | 108 +++++++++++++++++++++
public/image.svg | 82 ----------------
public/index.html | 31 +++---
5 files changed, 162 insertions(+), 99 deletions(-)
create mode 100644 public/assets/css/style.css
create mode 100644 public/assets/images/41156165560-4438592e93-o.webp
create mode 100644 public/assets/images/image.svg
delete mode 100644 public/image.svg
(limited to 'public')
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
new file mode 100644
index 0000000..db47790
--- /dev/null
+++ b/public/assets/css/style.css
@@ -0,0 +1,40 @@
+body {
+ text-align: center;
+ max-width: 100vw;
+}
+
+.container {
+ padding: 0;
+ max-width: 586.033px;
+ max-height: 586.033px;
+ margin: 0 auto;
+ overflow: hidden;
+ 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;
+}
diff --git a/public/assets/images/41156165560-4438592e93-o.webp b/public/assets/images/41156165560-4438592e93-o.webp
new file mode 100644
index 0000000..2ad3fa4
Binary files /dev/null and b/public/assets/images/41156165560-4438592e93-o.webp differ
diff --git a/public/assets/images/image.svg b/public/assets/images/image.svg
new file mode 100644
index 0000000..29f9306
--- /dev/null
+++ b/public/assets/images/image.svg
@@ -0,0 +1,108 @@
+
+
+
diff --git a/public/image.svg b/public/image.svg
deleted file mode 100644
index 5a5c3d9..0000000
--- a/public/image.svg
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-
diff --git a/public/index.html b/public/index.html
index 8040421..35a3030 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,31 +3,28 @@
- SVG Pan & Zoom Example
-
+ JavaScript/CSS Pan & Zoom Demo
+
- Pan & Zoom an SVG Image with JavaScript
+ Pan & Zoom an Element with CSS/JavaScript
Click and drag on the image to pan. Use the mouse wheel
to zoom in and out.
-
+
+
+
+
+
+
+
+