Snap SVG scale and centre loaded SVG file

Question

I have trouble with scaling and centring SVG loaded from file. It's #svg container to which I load SVG files with Snapsvg:

It's loaded SVG:

And when I'm scaling it:

How browser inspecting it:

My JS:

var s = Snap("#svg");
var g = s.group();
var tux = Snap.load("svg/roulette.svg", function ( loadedFragment ) {
    g.append( loadedFragment );
    var firstScene = new Snap.Matrix();
    firstScene.scale(1.5);
    g.animate({ transform: firstScene }, 0);
});

How can I scale my roulette and centre it in svg#svg element?

Working example: http://plnkr.co/edit/DE1dds8n3ULOLQRATnLY?p=preview

Answer 1

It may depend if you need to scale it and calculate where it should go, or if a responsive type solution could work. I would explore this first, and go for a calculated option otherwise.

As you haven't shown a running example, its hard to be sure though. I would post up a jsbin with the file getting loaded so others could play if the following doesn't work.

In the meantime, you could try something like this inside the load function...it may not work though depending on what Layer_1 and other svg parents though, and setting the viewBox to match the inner SVG.

s.select('#wheel'); // or whatever ID it has, or give it one
 .attr({  width: '100%', height: '100%', viewBox: "0 0 600 600" });

As an aside, you don't need to worry about Matrices, just use the Snap transform strings, so you don't need that code...eg

g.animate({ transform: 's1.5,1.5' }, 1000) 

is all you would need to animate scale by 1.5