| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-12 10:57:15 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-15 09:48:00 -0700 |
| commit | 263201d869956b94660d4efa8297e89dadbe36a8 (patch) | |
| tree | 8fa47922163548dda0739aaa5ff0612de96c9fd1 /public/index.html | |
Initial commit
Diffstat (limited to 'public/index.html')
| -rw-r--r-- | public/index.html | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..8040421 --- /dev/null +++ b/public/index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <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> + </head> + <body> + <h1>Pan & Zoom an SVG Image with 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> + <script src="app.js"></script> + </body> +</html> |