javascript - Zooming SVG with Hammer.js -

i writing cross platform web application displays information using svg. need have multi-touch interface pan , zoom svg graphic. research, appears hammer.js best approach, , using jquery library version.

i able pan , zoom image using viewbox property of svg. problem i'm having using center point information during pinch zoom (vs. scaling top left corner). center point, wherever in image, should remain in center of pinch. clearly, solution modify first 2 parts of viewbox, i'm having trouble determining correct values. center point (event.gesture.center) appears in browser page coordinates, need figure out how reliably scale , calculate viewbox x , y coordinates. i've looked examples, couldn't find quite related.

is using viewbox attribute best way scale svg images? there better alternatives? have sample code of zooming svg image pinch center?

also, i'm noticing though i'm binding event handling svg element, pinch gesture seems work anywhere on page. isn't default browser handling of pinch because zooming svg image using code. here's code i'm using binding pinch event:

$(window.demodata.svgelement).hammer().on("pinch", function (event) {     event.preventdefault();     ... }); 

thanks on these 2 issues.

i'm glad 1 else has been looking solve these problems. seems svg hasn't far had enough attention.

i have been looking , working on solutions several months. firstly, have 3 options moving svg.

1. using viewbox said. think best solution if want treat image single item.
2. you can use css transforms of svg element. downside causes pixelation means can use solutions exist other kinds of elements
3. you can use svg transforms on elements or groups of elements within svg.

to answer question of code centered pinch can described follows. first need translate pinch event center point screen coordinate svg coordinates using screenctm (coordinate transform matrix). if point has coordinates (x,y) origin of viewbox needs undergo transformation equivalent

• translation(-x, -y)
• scale(scalefactor)
• translation(x, y)

i have made work 'mostly' in library have called hammerhead runs on top of hammerjs. here example of in action.i won't give code solve problem there code go have put '...' ended writing viewbox object manipulate. reference here code use manipulate that.

scale: function(scale, center){   var boxscale = 1.0/scale;   center = center || this.center();   var newminimal = this.getminimal().subtract(center).multiply(boxscale).add(center);   var newmaximal = this.getmaximal().subtract(center).multiply(boxscale).add(center);   var newviewbox = viewbox(newminimal, newmaximal, this.getvalidator());   return newviewbox.valid()? newviewbox : null; } 

this method not without problems. change viewbox computationally intensive not make pleasant scrolling experience on phone except image few elements. work nicely if change view once in response action. example left right down keys. have explored of other options mentioned above in these repos

1. svg maneuver
2. svg agile
3. svgviewer

as mentioned trying quite sometime. these use 1 of approaches individually. both smooth scrolling , no pixilation think require combination of both. working on yet library.