Svg получает другой размер после применения svgPanZoom

Question

Svg автоматически изменяет размеры, чтобы заполнить его контейнер столбца. После полной загрузки svgPanZoom применяется, и я заканчиваю с меньшим изображением:

Если я добавлю высоту к контейнеру, он изменит свой размер, оставив пустые места с каждой стороны.

Проблема в том, что при увеличении и уменьшении изображение больше не центрируется:

Я думаю, что есть два подхода к решению этой проблемы: 1. Перецентрировать изображение на zoomOut. 2. Используйте viewBox preserveAspect для правильного изменения размера изображения без применения размера через CSS.

И то, и другое меня немного смущает, и после нескольких часов попыток я не могу заставить это работать. Это мой код:

HTML:

...
<div class="col-sm-9">
    <div class="title">
        <h1>Floor: {{ floor }}</h1>
        <div id="map-container"></div>
    </div>
</div>
...

JS:

function createNewEmbed(data){
    var embed = document.createElement('object');
    embed.setAttribute('id', 'map');
    embed.setAttribute('style', 'background-color: blue');
    embed.setAttribute('type', 'image/svg+xml');
    embed.setAttribute('data', data);
    document.getElementById('map-container').appendChild(embed)
    lastEventListener = function(){
        // Zoom and Pan
        panZoomInstance = svgPanZoom(embed, {
            zoomEnabled: true,
            controlIconsEnabled: false,
            fit: true,
            center: true,
            minZoom: 1,
            zoomScaleSensitivity: 0.4,
            beforePan: beforePan
        });

        // Zoom out
        // panZoomInstance.zoom(0.2)
        $(window).resize(function(){
            panZoomInstance.resize();
            panZoomInstance.fit();
            panZoomInstance.center();
        })

    embed.addEventListener('load', lastEventListener)
    return embed
}

function removeEmbed(){
    // Destroy svgpanzoom
    svgPanZoom(lastEmbed).destroy()
    // Remove event listener
    lastEmbed.removeEventListener('load', lastEventListener)
    // Null last event listener
    lastEventListener = null
    // Remove embed element
    document.getElementById('map-container').removeChild(lastEmbed)
    // Null reference to embed
    lastEmbed = null
}

function beforePan (oldPan, newPan){
    var stopHorizontal = false
    , stopVertical = false
    // Computed variables
    , sizes = this.getSizes()
    , gutterWidth = sizes.width
    , gutterHeight = sizes.height
    , leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth
    , rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom)
    , topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight
    , bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom)

    customPan = {}
    customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x))
    customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y))
    return customPan
}

В начале я делаю:

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

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

Answer 1

Похоже, использование оптимизированного формата Inkscape не работает. обычные inkscape svg и немного css сделали свое дело:

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

Я предполагаю, что это связано с отсутствием viewBox в этом формате. Если кто-нибудь знает другой способ решить эту проблему, это было бы неплохо, поскольку оптимизированная версия меньше.