Question

我使用svg-pan-zoom（https://github.com/ariutta/svg-pan-zoom/）来在我的angularJS页面中显示SVG：

<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：

你可以在这里的plunker上看到它：http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview 我们需要嵌入以使其正常工作（全宽度问题我猜测）。将鼠标放在左侧以生成菜单，您将看到我们需要在元素上单击两次以重新激活平移/缩放。

更改SVG源时丢失缩放/平移

0 个答案: