| 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/index.html | |
| 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/index.html')
| -rw-r--r-- | public/index.html | 19 |
1 files changed, 4 insertions, 15 deletions
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> |