| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-20 19:34:06 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-23 10:09:51 -0700 |
| commit | 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf (patch) | |
| tree | a072ea398ce00b68dd0e5e670b32ac5ee1a812ad /public/index.html | |
| parent | 263201d869956b94660d4efa8297e89dadbe36a8 (diff) | |
Use CSS transformations instead of manipulating the viewBox
Diffstat (limited to 'public/index.html')
| -rw-r--r-- | public/index.html | 31 |
1 files changed, 14 insertions, 17 deletions
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 @@ <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - <title>SVG Pan & Zoom Example</title> - <style> - body { - text-align: center; - max-width: 100vw; - } - - object { - max-height: 400px; - max-width: 100%; - background-color: lightsteelblue; - border: 1px solid steelblue; - touch-action: none; - } - </style> + <title>JavaScript/CSS Pan & Zoom Demo</title> + <link rel="stylesheet" href="assets/css/style.css"> </head> <body> - <h1>Pan & Zoom an SVG Image with JavaScript</h1> + <h1>Pan & Zoom an Element with CSS/JavaScript</h1> <p> Click and drag on the image to pan. Use the mouse wheel to zoom in and out. </p> - <object type="image/svg+xml" data="image.svg"></object> + <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> <script src="app.js"></script> </body> </html> |