Svg在应用svgPanZoom后获得不同的大小

Svg自动调整大小以填充其列容器。完全加载后，应用svgPanZoom并以较小的图像结束：

如果我对容器应用一个高度，它将调整大小，在每一侧留下空白

问题是，当我再次放大和缩小图像时，图像不再居中：

我认为有两种方法可以解决这个问题： 1.在zoomOut上重新居中显示图像。 2.使用viewBox PreserveApect可使图像正确调整大小，而无需通过CSS应用大小

这两个对我来说都有点混乱，经过几个小时的尝试，我无法让它工作。这是我的代码：

HTML:

首先，我要做的是：

window.onload = function(){
    var lastEventListener = null;

    var lastEmbedSrc = '/assets/images/6e2.svg'
        , lastEmbed = createNewEmbed(lastEmbedSrc)
        ;

---

看起来使用优化的inkscape格式不起作用。常规inkscape svg和一些css实现了这一点：

#map {
    height: 100%;
    width: 100%;
}

我猜这与此格式中缺少的viewBox有关。如果有人知道解决这个问题的其他方法，那就太好了，因为优化后的版本更小

window.onload = function(){
    var lastEventListener = null;

    var lastEmbedSrc = '/assets/images/6e2.svg'
        , lastEmbed = createNewEmbed(lastEmbedSrc)
        ;

#map {
    height: 100%;
    width: 100%;
}