| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 14:58:29 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 15:09:41 -0700 |
| commit | 9c34e15c47cf3578adeff41693a62061a25fdcde (patch) | |
| tree | fed30aa9d385c5be893f5715791837583d480350 /public | |
| parent | 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf (diff) | |
Update implementation to account for WebKit bugv0.2.0
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
Diffstat (limited to 'public')
| -rw-r--r-- | public/assets/css/style.css | 37 | ||||
| -rw-r--r-- | public/assets/images/41156165560-4438592e93-o.webp | bin | 585068 -> 0 bytes | |||
| -rw-r--r-- | public/assets/images/image.svg | 20 | ||||
| -rw-r--r-- | public/index.html | 19 |
4 files changed, 20 insertions, 56 deletions
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 Binary files differdeleted file mode 100644 index 2ad3fa4..0000000 --- a/public/assets/images/41156165560-4438592e93-o.webp +++ /dev/null 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 @@ -<?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> 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 @@ <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> |
