Потеря масштаба / панорамирования при смене источника SVG

Question

Я использую svg-pan-zoom ( https://github.com/ariutta/svg-pan-zoom/) для отображения SVG на моей странице angularJS:

<object id="svgElement" type="image/svg+xml" data="../SVG/{{currentLanguage}}/{{currentCartography}}.svg">
It seems your browser doesn't support SVG.
</object>

<script>
    window.onload = function() {
        document.getElementById("svgElement").style.width = window.screen.availWidth + "px";
        document.getElementById("svgElement").style.height = window.screen.availHeight + "px"; // This seems to include the browser bar :(
        svgPanZoom('#svgElement', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            minZoom: 0.75,
            maxZoom: 50,
            zoomScaleSensitivity: 0.25,
            dblClickZoomEnabled: true
        });
    };
</script>

В зависимости от некоторых событий я хочу изменить отображаемый SVG, поэтому после нажатия на некоторые элементы я вызываю changeSVG(fileName) функция:

    <a href="#" onclick="changeSVG('map1')">map1</a><br />
    <a href="#" onclick="changeSVG('map2')">map2</a><br />
    <a href="#" onclick="changeSVG('map3')">map3</a><br />
    <a href="#" onclick="changeSVG('tiger')">tiger</a><br />

SVG изменен и отключен, но: я теряю функцию масштабирования и панорамирования.

Я получу обратно функцию масштабирования и панорамирования, если снова нажму на тот же элемент. В конце, чтобы изменить отображаемый SVG и сохранить функции масштабирования / панорамирования, мне нужно нажать 2 раза вместо одного. Вызов функции 2 раза вместо одного за одним кликом не решает проблему.

Моя функция changeSVG:

$scope.changeSVG = function (fileName) {
    svgPanZoom('#svgElement').destroy();
    $scope.currentCartography = fileName;
    document.getElementById("svgElement").style.width = window.screen.availWidth + "px";
    document.getElementById("svgElement").style.height = window.screen.availHeight + "px"; // This seems to include the browser bar :(
    svgPanZoom('#svgElement', {
        zoomEnabled: true,
        controlIconsEnabled: true,
        fit: true,
        center: true,
        minZoom: 0.75,
        maxZoom: 50,
        zoomScaleSensitivity: 0.25,
        dblClickZoomEnabled: true
    });
}

РЕДАКТИРОВАТЬ: я попробовал это для теста, но с ним он даже не загружает пан-зум, даже после 2 кликов:

    $scope.changeSVG = function (fileName) {
        var svgData = "../SVG/" + $scope.currentLanguage + "/" + fileName + ".svg";
       /* document.getElementById("svgElement").setAttribute("data", svgData);*/
        $scope.currentCartography = fileName;
        svgPanZoom('#svgElement').destroy();
        var oldE = document.getElementById("svgElement");
        document.getElementById("svgElement").parentElement.removeChild(oldE);
        var newE = document.createElement("object");
        newE.setAttribute("type", "image/svg+xml");
        newE.setAttribute("id", "svgElement");
        newE.setAttribute("style", "width: " + window.screen.availWidth + "px; height: " + window.screen.availHeight + "px;");
        newE.setAttribute("data", svgData);
        var nextE = document.getElementById("afterSVG");
        document.body.insertBefore(newE, nextE);
/*
        document.getElementById("svgElement").style.width = window.screen.availWidth + "px";
        document.getElementById("svgElement").style.height = window.screen.availHeight + "px";
*/
       // alert(document.getElementById("svgElement").getAttribute("data"));
        svgPanZoom('#svgElement', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            minZoom: 0.75,
            maxZoom: 50,
            zoomScaleSensitivity: 0.25,
            dblClickZoomEnabled: true
        });
    }

РЕДАКТИРОВАТЬ 2:

Вы можете увидеть это на плункере здесь: http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview мы должны быть встроены, чтобы заставить его работать должным образом (я полагаю, проблема с полной шириной). Наведите курсор мыши слева, чтобы вызвать меню, и вы увидите, что нам нужно дважды щелкнуть элемент, чтобы активировать панорамирование / масштабирование.