縮放Raphael/SVG容器以適合所有內容

Question

我有一些Raphael/SVG項目可能會超出邊界。我想要的是能夠自動縮放和居中SVG顯示所有內容。

我有一箇中心它適當的，我只是無法弄清楚如何獲得縮放工作

編輯 這現在工作的一些部分的工作代碼...但犯規居中對齊，並且需要填充..

var maxValues = { x: 0, y: 0 }; 
var minValues = { x: 0, y: 0 }; 

//Find max and min points 
paper.forEach(function (el) { 
    var bbox = el.getBBox(); 

    if (bbox.y < minValues.y) minValues.y = bbox.y; 
    if (bbox.y2 < minValues.y) minValues.y = bbox.y2; 

    if (bbox.y > maxValues.y) maxValues.y = bbox.y; 
    if (bbox.y2 > maxValues.y) maxValues.y = bbox.y2; 

    if (bbox.x < minValues.x) minValues.x = bbox.x; 
    if (bbox.x2 < minValues.x) minValues.x = bbox.x2; 

    if (bbox.x > maxValues.x) maxValues.x = bbox.x; 
    if (bbox.x2 > maxValues.x) maxValues.x = bbox.x2; 
}); 

var w = maxValues.x - minValues.x; 
var h = maxValues.y - minValues.y; 

console.log(minValues,maxValues,w,h) 

paper.setViewBox(minValues.x, minValues.y, w, h, false); 

Answer 1

我使用這段代碼來將包含我想要以幾乎全屏顯示的所有SVG的viewbox居中。

var elmnt = $(viewport); 
var wdif = screen.width - width; 
var hdif = screen.height - height; 
if (wdif < hdif){ 
    var scale = (screen.width - 50)/width; 
var ty = (screen.height - (height * scale))/2 
var tx = 20; 
}else{ 
var scale = (screen.height - 50)/height; 
var tx = (screen.width - (width * scale))/2 
var ty = 20; 
} 
elmnt.setAttribute("transform", "scale("+scale+") translate("+tx+","+ty+")"); 

它的作用是使用視口大小和屏幕大小之間的差異，並將其用作比例。當然，你需要將所有元素包裝在一個視圖框中。我希望這對你有用。再見！

編輯

從來就使這個小提琴.... http://jsfiddle.net/MakKZ/

雖然在原來的片段從來就使用的屏幕尺寸，用小提琴，你會I'm使用的是看jsfiddle使用的HTML元素的大小。無論您在屏幕上繪製多少個圓圈（或圓圈的大小），您都可以看到它們。