對齊SVG縮放和中心加載的SVG文件

我無法縮放和居中從文件加載的SVG。這是#svg容器我加載與Snapsvg SVG文件：對齊SVG縮放和中心加載的SVG文件

它的滿載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

來源

2016-04-28 Demid Ganenko

，如果你需要它的規模和計算，它應該去，或者如果響應類型的解決方案可以工作，這可能取決於。我會先探索這個，然後去計算一個選項。

由於您尚未顯示正在運行的示例，因此很難確定。我會發佈一個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

來源

2016-04-28 09:19:21 Ian

http://plnkr.co/edit/DE1dds8n3ULOLQRATnLY 'g.animate（{transform：'s1.5'}，1000）'不起作用。將viewBox更改爲300x300或600x600時 - SVG右移太多。但更小的viewBox SVG出現在#svg容器中 –

對於動畫，嘗試's5,5'，我忘了它需要x和y。 – Ian

另外，它看起來像你重寫的寬度/高度與CSS，所以我會刪除（除非這是你想要的）。 – Ian

對齊SVG縮放和中心加載的SVG文件

回答

相關問題