Javascript 使用JS缩放和居中SVG

学习SVG/snap。在一些帮助下，我可以从地图中提取一个区域，并将其加载到一个模型上

我现在正试图通过

200px

div将SVG保持在

200px

范围内，保持其纵横比和缩放比例，因此模式中的每个区域都将适合上面的框，但保持与其他区域的缩放比例

   var m = Snap('#world-map');
   var d = Snap('#svg-region');
   var regionSVG = m.select('#' + region);
   var p = regionSVG.clone();
   d.append(p);
   var bb = regionSVG.getBBox();

   var vb = bb.x + ' ' + bb.y + ' ' + bb.width + ' ' + bb.height;
   d.attr({
     viewBox: vb
   })

我试图在bbox中处理数据以创建一个刻度，但失败惨重

function zoomBBox(bbox)
{
    var zbbox, ratio, diffx, diffy;
    var length = 200;

    if (bbox.width > bbox.height) {
        ratio = bbox.width / length;
        zbbox.width = length;
        zbbox.height = bbox.height * ratio;
    } else {
        ratio = bbox.height / length;
        zbbox.width = bbox.width * ratio;
        zbbox.height = length;
    }

    diffx = (zbbox.width - length) / 2;
    diffy = (zbbox.height - length) / 2;

    zbbox.x = bbox.x + diffx;
    zbbox.y = bbox.y + diffy;

    return zbbox;
}

加上

.modal-body svg {
  max-width: 100%;
  max-height: 100%;
}

---

您只需要CSS:D的强大功能

您需要通过css HEIGHT&WIDTH在模式内的SVG#SVG区域中定义希望它们以最大值显示的值。 例如100px和100px，它们将在该框内渲染

#svg-region{width:100px; height:100px;}

要对齐它，请使用带有以下css的#svg区域的as包装器（我认为应该可以，没有测试它垂直和水平对齐）

---

您是否尝试添加css

max height:100%到svg？您好@caramba，谢谢。但是如何相对于其他svg缩放每个svg？现在，一个小区域就像一个大区域一样填满了盒子，失去了它的定义并拉伸了它的内容。在这个项目中，我在这个区域还有其他的标记，它们也在缩放。我认为解决方案在
视图框中。
.wrapper{display:flex; jusfity-alignment:center; align-item:center;}