Snap SVG Waage und Mitte geladen SVG-Datei

Question

Ich habe Probleme mit der Skalierung und Zentrierung von SVG aus Datei geladen. Es ist #svg Container, auf die ich SVG-Dateien mit Snapsvg laden:

Es geladen SVG:

Und wenn ich es bin Skalierung:

Wie Browser prüft es:

Mein 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); 
}); 

Wie kann ich mein Roulette und in der Mitte es in svg # svg Element skalieren?

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

Answer 1

Es kann abhängen, wenn Sie es skalieren müssen und berechnen, wo es gehen sollte, oder wenn eine ansprechende Lösung funktionieren könnte. Ich würde das zuerst untersuchen und ansonsten eine berechnete Option wählen.

Da Sie kein laufendes Beispiel gezeigt haben, ist es schwer, sicher zu sein. Ich würde eine jsbin mit der Datei hochladen, die geladen wird, damit andere spielen können, wenn das folgende nicht funktioniert.

In der Zwischenzeit könnten Sie so etwas in der Load-Funktion versuchen ... es funktioniert allerdings nicht, je nachdem, was Layer_1 und andere SVG-Elternteile sind, und setzt die ViewBox auf das innere SVG.

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

Als Nebenwirkung, brauchen Sie sich nicht um Matrices zu sorgen, verwenden Sie einfach die Snap-Strings umwandeln, so dass Sie nicht, dass Code benötigen ... zB

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

alles, was Sie ist msgstr "1