Snap SVG scale и загруженный в центр SVG-файл

Question

У меня проблемы с масштабированием и центрированием SVG, загружаемого из файла. Это #svg контейнер, который я загружаю SVG файлов с Snapsvg:

Это загружено SVG:

И когда я масштабирование:

Как браузер проверяет его:

Мои 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); 
}); 

Как масштабировать свою рулетку и в центре его в SVG # SVG элемент?

Рабочий пример: http://plnkr.co/edit/DE1dds8n3ULOLQRATnLY?p=preview

Answer 1

Это может зависеть, если вам нужно масштабировать и вычислить, где она должна идти, или если отзывчивым решение типа может работать. Сначала я бы изучил это и по-другому рассчитывал вариант.

Поскольку вы не показывали пример выполнения, его трудно убедиться. Я бы опубликовал jsbin с загруженным файлом, чтобы другие могли играть, если следующее не работает.

В то же время вы можете попробовать что-то подобное в функции загрузки ... это может не сработать, хотя в зависимости от того, что Layer_1 и другие svg-родители, и настройки viewBox соответствуют внутреннему SVG.

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

Как и в сторону, вам не нужно беспокоиться о матрицах, просто использовать привязку преобразования строк, так что вам не нужно, что код ... например

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

это все, что вы необходимо будет увеличить масштаб на 1,5