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

37
public/assets/css/style.css
View File

@@ -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;
}

BIN
public/assets/images/41156165560-4438592e93-o.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 571 KiB

20
public/assets/images/image.svg
View File

@@ -1,22 +1,20 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml version="1.0" standalone="yes"?>
<svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style>
svg {
overflow: hidden;
border: 1px solid silver;
transform: scale(0.9);
}
circle, rect {
fill-opacity: 0.9;
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, .5));
}
</style>
<g>
<circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/>
</g>
<script type="text/javascript">//<![CDATA[
const svgns = 'http://www.w3.org/2000/svg',
svg = document.querySelector('svg'),
group = svg.querySelector('g'),
pointerEl = svg.querySelector('#pointer'),
{ x: vbX, y: vbY, width: vbWidth, height: vbHeight } = svg.viewBox.baseVal,
shapeCount = 100,
@@ -103,6 +101,6 @@
[...Array(shapeCount)]
.map(() => getRandomFillAndStrokeVals())
.forEach(fillAndStrokeVal => svg.appendChild(getRandomShape(fillAndStrokeVal)));
.forEach(fillAndStrokeVal => pointerEl.before(getRandomShape(fillAndStrokeVal)));
//]]></script>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

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>