如何在svg中調整多邊形的大小？

我正在嘗試調整svg多邊形元素的大小，具體取決於svg元素。如何在svg中調整多邊形的大小？

假設我有一個寬度和高度各爲500的svg元素，但是在某些情況下，多邊形元素xy個點將離開svg元素的高度和寬度。是否可以調整多邊形以適應svg元素？

2013-12-17 Jetson John

計算SVG中所有多邊形元素的邊界矩形很容易。只需使用getBBox()功能的循環中，如下所示：

var o = document.getElementById('theSVG'); 
var s = o.getElementsByTagName('polygon'); 
minx = miny = 1e100; 
maxx = maxy = -minx; 
for (var i = 0; i < s.length; i++) { 
    var x = s[i].getBBox(); 
    if (x.x < minx) minx = x.x; 
    if (x.y < miny) miny = x.y; 
    if (x.x + x.width > maxx) maxx = x.x + x.width; 
    if (x.y + x.height > maxy) maxy = x.y + x.height; 
}

要擴大成果的基礎上的SVG圖像，它看起來像你必須單獨改變每個多邊形。（設置頂級<svg>元素的變換屬性似乎不工作）。

for (i = 0; i < s.length; i++) { 
    var m = s[i].getCTM(); 
    m = m.scale(scale).translate(-minx, -miny); 
    s[i].setAttribute("transform", "matrix(" + m.a + "," + m.b + "," + m.c + "," + m.d + "," + m.e + "," + m.f + ")"); 
}

你可以看到它在這裏工作：Link to JSFiddle

來源

2013-12-17 15:02:55

感謝您的代碼。它的寬度和高度都是500px。但是當我將寬度更改爲1000和500的高度時，有些部分會被切斷。你可以幫我嗎？這裏是更新後的鏈接http://jsfiddle.net/BS9tF/2/ –

糟糕，更改'var scaley = width /（maxy - miny）;'var'scaley = height /（maxy - miny）;' –

Your代碼對我非常有幫助。但我不明白你寫的一行代碼。你可以在小提琴中評論你的代碼，以便我能夠理解和學習代碼。 –

代碼是的，你可以使用transform="scale(0.5)"例如。示例here。

來源

2013-12-17 11:39:13

請問有什麼辦法來動態計算比例因子。例如，如果某個多邊形元素需要比例因子0.1來適應svg元素，那麼在那種情況下我該做什麼？ –

這完全取決於你如何生成這些多邊形。如果您使用Javascript，則可以使用'.getBBox（）'獲得邊界框，並通過將其與SVG的大小進行比較來計算比例因子。 –

如何在svg中調整多邊形的大小？

回答

相關問題