Question

我正在尝试调整svg多边形元素的大小，具体取决于svg元素。

假设我有一个宽度和高度各为500的svg元素，但在某些情况下，多边形元素x y点将超出svg元素的高度和宽度。是否可以调整多边形的大小以适应svg元素？

中的代码

Answer 1

是的，您可以使用transform="scale(0.5)"作为示例。示例here。

Answer 2

计算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

如何在svg中调整多边形的大小？

2 个答案: