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

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

0 голосов
/ 13 июня 2018

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

SVG is smaller and doesn't fill its container

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

Image on set height size

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

enter image description here

Я думаю, что есть два подхода для решения этой проблемы: 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)
        ;

1 Ответ

0 голосов
/ 13 июня 2018

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

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

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

...