# magic-viewbox

> Library for making draggable, zoomable, interactive SVG viewboxes

Latest version **0.0.3** (published 2018-02-19) · LIL license · 0 weekly downloads

## Install

```sh
npm install magic-viewbox
pnpm add magic-viewbox
yarn add magic-viewbox
bun add magic-viewbox
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-02-19 |
| First published | 2018-02-19 |
| Weekly downloads | 0 |
| License | LIL |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rich_harris |

## Links

- npm: https://www.npmjs.com/package/magic-viewbox
- npm.io page: https://npm.io/package/magic-viewbox

## Recent versions

- 0.0.3 (latest) — 2018-02-19
- 0.0.2 — 2018-02-19

## README

# magic-viewbox

You have an SVG element in your webapp. You want to do one or more of the following:

* Pan it
* Zoom it
* Translate from screen coordinates to SVG coordinates and back again

I might be the only person in the world who has ever had this problem, but in case I'm not, **magic-viewbox** is the (or at least my) solution.


## Usage

Include `<script src='https://unpkg.com/magic-viewbox'></script>` on your page (or load it from npm, or whatever). Assuming `svg` is a reference to your SVG element, create a ViewBox instance like so:

```js
let vb = new ViewBox(svg);
```

## API

```js
// Set a new viewbox. Each value is optional, and will
// fall back to the current value
vb.set({ x: 0, y: 0, width: 100, height: 100 });

// Animate to a new viewbox. Again, values are optional
let animation = vb.animate({ x, y, width, height }, {
	duration: 800,
	smooth: true
});

animation.then(() => {
	console.log('animation completed!');
});
```

TODO finish writing this...

---
_Source: https://npm.io/package/magic-viewbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._