A React component that adds pan and zoom features to SVG
npm install react-svg-pan-zoom





sh
npm install --save react-svg-pan-zoom
`
$3
`sh
yarn add react-svg-pan-zoom
`
$3
`html
`
Usage examples
- Basic - Basic usage of .
- Uncontrolled Component - Basic usage of .
- JSFiddle - This is a JSFiddle demo that uses UMD bundle.
- CodeSandbox - This is a CodeSandbox demo.Changelog
- v2.0 - Project refactor. Follow this guide for migration instructions.
- v2.1 - Adds setPointOnViewerCenter, reset methods and className, style props
- v2.2 - Introduces tool auto, improves default toolbar
- v2.3 - Adds touch events support
- v2.4 - Adds es:next support, deploy new website
- v2.5 - Adds preventPanOutside and scaleFactor props
- v2.6 - Introduces transformation-matrix that reduces bundle size thanks to three shaking, Fixes pan limit behaviour, Replaces toolbar links with buttons, minor improvements
- v2.7 - Adds miniature feature, Adds PropTypes support
- v2.8 - Adds storybook demo, Remove bower support, Adds pinch to zoom feature, Fixes miniature size
- v2.9 - Reinvents miniature and introduce props miniatureBackground, miniatureHeight, Minor improvements & fix
- v2.10 - Introduces prop disableDoubleClickZoomWithToolAuto
- v2.11 - Improves docs, updates deps
- v2.12 - Exports miniature to allow customization
- v2.13 - Fixes resize issues (#58), Upgrades deps
- v2.14 - Introduces prop scaleFactorOnWheel, Upgrades deps
- v2.15 - Improves autopan feature (#71), adds scaleFactorMax, scaleFactorMin props (#71), Upgrades deps
- v2.16 - Adds onPan and onZoom callbacks, Upgrade deps, Fixes boundaries feature
- v2.17 - Upgrades deps
- v2.18 - Introduces toolbarProps.SVGAlignX and toolbarProps.SVGAlignY props. Adds alignment configuration in fitToViewer(SVGAlignX = "left", SVGAlignY = "top") method (#120). Upgrades deps.
- v3.0 - Upgrades to babel 7 and storybook 4; Introduces component and makes a stateless component (except for some optimizations); Moves props related to miniature and toolbar, respectively into the miniatureProp and toolbarProp props. Migration guide is available here.
- v3.1 - Upgrades to storybook 5 and transformation-matrix 2; Fixes some Babel configuration issues
- v3.2 - Upgrades deps
- v3.3 - Adds SVG viewbox prop support #150
- v3.4 - Upgrades deps and increases code quality (fixing eslint warnings)
- v3.5 - Handles wheel event as passive #158, upgrades deps
- v3.6 - Adds some unit tests, Fixes #161, upgrades deps
- v3.7 - Adds some more unit tests, upgrades deps
- v3.8 - Adds cover option on fitToViewer method #167, adds activeToolColor` property #168, upgrades deps