| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-18 13:43:26 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-18 13:47:07 -0700 |
| commit | 25eca15a3007c76c4e444b859683feb29edfa183 (patch) | |
| tree | d0a867be54ab95f5e138cec9df662fa0ba450544 /public | |
| parent | 99d137cc0937c0342fc1076eafe609c8aa370087 (diff) | |
WIP: translate an object to zoomed position without scalingcm-pan-not-zoom
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 30 |
1 files changed, 23 insertions, 7 deletions
diff --git a/public/index.html b/public/index.html index d97baee..bfcf3ef 100644 --- a/public/index.html +++ b/public/index.html @@ -7,13 +7,29 @@ <link rel="stylesheet" href="assets/css/style.css"> </head> <body> - <h1>Pan & Zoom SVG Element with CSS/JavaScript</h1> - - <p> - Click and drag the image to pan. Use the mouse wheel to zoom in and out. - </p> - - <object type="image/svg+xml" data="assets/images/image.svg"></object> + <!--<object type="image/svg+xml" data="assets/images/image.svg"></object>--> + <svg viewBox="-200 -150 400 300"> + <defs> + <circle id="zoom-marker" cx="0" cy="0" r="30" fill="maroon" /> + <circle id="pan-marker" cx="0" cy="0" r="20" fill="darkgray" /> + </defs> + <g class="pan-zoom"> + <use id="zm-1" href="#zoom-marker" x="-50" y="-50" /> + <use id="zm-2" href="#zoom-marker" x="-50" y="50" /> + <use id="zm-3" href="#zoom-marker" x="50" y="-50" /> + <use id="zm-4" href="#zoom-marker" x="50" y="50" /> + </g> + <g class="pan"> + <use id="pm-1" href="#pan-marker" x="-50" y="-50" /> + <use id="pm-2" href="#pan-marker" x="-50" y="50" /> + <use id="pm-3" href="#pan-marker" x="50" y="-50" /> + <use id="pm-4" href="#pan-marker" x="50" y="50" /> + </g> + <g> + <!--<circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/>--> + <circle cx="0" cy="0" r="1" fill="white" /> + </g> + </svg> <script src="app.js"></script> </body> </html> |