縮放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的視圖框。

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/

雖然在原始片段中我使用了屏幕尺寸，但是在小提琴上，你會看到我使用的是jsfiddle使用的HTML元素的大小。 無論你在屏幕上繪制多少個圓圈（或圓圈的大小），你總能看到它們。