0

我正在使用 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 次而不是 1 次并不能解决问题。

我的 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我们 需要嵌入以使其正常工作（我猜是全宽问题）。将鼠标放在左侧以生成菜单，您会看到我们需要在一个元素上单击两次才能重新激活平移/缩放。

4

0 回答 0