ccm/pan-zoom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update implementation to account for WebKit bug

Browse Source 
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 <svg> element, we can only transform a child element
This commit is contained in:
Catalin Constantin Mititiuc
2025-06-16 23:25:25 -07:00
parent e0fbba8fee
commit b449601a6b
10 changed files with 77 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/index.html
View File

@@ -3,28 +3,17 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>JavaScript/CSS Pan & Zoom Demo</title>
<title>SVG Element Pan & Zoom Demo</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Pan & Zoom an Element with CSS/JavaScript</h1>
<h1>Pan & Zoom SVG Element with CSS/JavaScript</h1>
<p>
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.
</p>
<p>
<button>
<span class="button-text svg">Raster image</span>
<span class="button-text raster">SVG image</span>
</button>
</p>
<div class="container">
<object type="image/svg+xml" data="assets/images/image.svg"></object>
<img src="assets/images/41156165560-4438592e93-o.webp"/>
</div>
<object type="image/svg+xml" data="assets/images/image.svg"></object>
<script src="app.js"></script>
</body>
</html>