svg.panzoom.js icon indicating copy to clipboard operation
svg.panzoom.js copied to clipboard

Update basic demo to include viewbox

Open sdiemert opened this issue 3 years ago • 4 comments

Great library! One suggestion for the README file.

Please include examples that setup up the viewbox. I spent about an hour trying to figure out why the most basic examples wouldn't integrate with my existing svgdotjs code. Turns out I wasn't setting the viewbox and I wouldn't have known to do this unless I dug into the issues on this repo.

A basic example might be:

// enables panZoom
var canvas = SVG()
  .addTo('#id')
  .size(1000, 1000)
  .viewbox('0 0 500 500')
  .panZoom()

// zoom programatically
canvas.zoom(lvl, point)

I understand that this will setup a 1000x1000 canvas and create 500x500 viewbox.

If you don't do something like this then one gets console errors like:

Error: <svg> attribute viewBox: Expected number...

Thank you!

sdiemert avatar Jul 25 '21 23:07 sdiemert

Feel free to go ahead and create a pr which adds that to the Readme :)

Fuzzyma avatar Jul 26 '21 06:07 Fuzzyma

Thank you! This is really helpful.

liweicheng00 avatar Aug 29 '21 06:08 liweicheng00

me too

rainyspring avatar Nov 03 '21 08:11 rainyspring

Super helpful, thank you @sdiemert!

BillyPurvis avatar Nov 30 '21 17:11 BillyPurvis