| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 17:51:50 -0800 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 17:55:03 -0800 |
| commit | dbfe9c6fe7ec2317641b9e9878dbdd09c9a254ec (patch) | |
| tree | 99d51a64f46589a667387479e99992ec37271b11 | |
| parent | 79964ead9181d69c5463777fcd2b227a14d30d32 (diff) | |
Update README
| -rw-r--r-- | README.md | 75 | ||||
| -rw-r--r-- | public/assets/images/image.svg | 2 |
2 files changed, 73 insertions, 4 deletions
@@ -3,14 +3,83 @@ Pan/zoom library for SVG elements. Hold and drag to pan. Use the mouse wheel to zoom. See `src/app.js` for a usage example. -## View demo +## Usage + +### Requirements + +All the content to be panned/zoomed must be in one root element. + +`image.svg` + +``` xml +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg viewBox="..." version="1.1" xmlns="http://www.w3.org/2000/svg"> + <g id="main"> + <!-- SVG elements to be panned/zoomed... --> + </g> +</svg> +``` + +`index.html` + +``` html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + </head> + <body> + <object type="image/svg+xml" data="image.svg"></object> + <script src="index.js"></script> + </body> +</html> +``` + +### Standard + +`index.js` + +``` js +import { pan, zoom } from 'pan-zoom'; + +const optionalZoomFactor = 0.1, + object = document.querySelector('object'); + +window.addEventListener('load', function () { + const svg = object.contentDocument.querySelector('svg'), + targetEl = svg.querySelector('#main'); + + svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor), { passive: false }); + svg.addEventListener('pointerdown', pan(targetEl), { passive: false }); +}); +``` + +### With restore + +The same as standard except the pan/zoom returns to what it was after a page +refresh. + +`index.js` + +``` js +import { withRestore as panzoom } from 'pan-zoom'; +const object = document.querySelector('object'); + +window.addEventListener('load', function () { + const svg = object.contentDocument.querySelector('svg'); + panzoom.start(svg, '#main'); +}); +``` + +## Start the demo 1. Install the development server packages. - docker run --rm -w /app -v $PWD:/app -u $(id -u):$(id -u) node npm install + $ docker run --rm -w /app -v $PWD:/app -u $(id -u):$(id -u) node npm install 2. Start the server. - docker run --rm --init -it -w /app -v $PWD:/app -p 8080:8080 node node dev-server.js + $ docker run --rm --init -it -w /app -v $PWD:/app -p 8080:8080 node node dev-server.js 3. Visit `localhost:8080` to view. diff --git a/public/assets/images/image.svg b/public/assets/images/image.svg index a823339..c9bee0c 100644 --- a/public/assets/images/image.svg +++ b/public/assets/images/image.svg @@ -1,4 +1,4 @@ -<?xml version="1.0" standalone="yes"?> +<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style> circle, rect { |
