XML : SVG viewport not working properly

I am sorry if some of the questions and errors are stupid, svg noob here.

So basically I am using raphael js to load a svg map to my page. The map consists of small circles, which are seats in a theater. There is onHover effect and other stuff like that.

I want that onClick on a circle, the map moves in a way that the clicked circle is in center now, and I'd also like a zoom in to that area, since the map is big. I figured out that I need to work with viewBox, but once I've started implementing it, everything went wrong. Now even my map isn't displayed correctly.

This is my svg: http://svgur.com/i/Cn.svg

And this is what I get as result: http://prntscr.com/cw571n

My js is in coffeescript, for now I post it like this, maybe someone is familiar with it, but I am working to change it to js here on stackoverflow.

  ;((window) ->      'use strict'        # Default values      settings =          attributes:              fill: 'green'              transform: ''              'stroke-width': 0          animTime: 300          animEase: 'backOut'          scale: 3          width: 1391          height: 900        # Hover animation      animation = new Raphael.animation({          fill: '#fff'          stroke: '#005e00'          'stroke-width': 3          transform: 's' + settings.scale      }, settings.animTime, settings.animEase)        loadSVG = (file) ->          response = null          $.ajax({              type: 'GET'              url: file              dataType: 'xml'              async: false              success: (svgXML) ->                  response = svgXML          })          return response        renderSVG = (svgXML) ->          # DOM Elements          container  = document.getElementById('mapContainer')          paper      = new Raphael(container, settings.width, settings.height)          map        = paper.importSVG(svgXML)            paper.setViewBox(0, 0, 400, 1000, true)            map.hover(() ->              this[0].style.cursor = 'pointer'              this.animate(animation)          ,() ->              this[0].style.cursor = 'default'              this.animate(settings.attributes, settings.animTime, settings.animEase)          )            map.click(() ->              cx = this.attr('cx')              cy = this.attr('cy')                paper.setViewBox((900 / 2) - cx, 0, 900, 1391, true)          )        init = () ->          renderSVG(loadSVG('img/svgscala.svg'))        init()    )(window)    

Can someone help me first of all resize the svg correctly, the height has to be 900px, the width should respect the ratio. Then onClick on a circle, the circle has to be the new center of the map/canvas, and the area around the circle should be zoomed in.