Question

我有<object>我在其中加载外部svg文件：

<object type="image/svg+xml" data="system.svg" id="Graph_Container" class="GraphContainmentArea">
    Your browser does not support SVG 
</object>

我正在使用以下库的SVG平移和缩放功能：https://github.com/ariutta/svg-pan-zoom。但是，简单地将svg-pan-zoom.js文件添加到我的页面似乎不足以将object中包含的svg的任何类型的功能添加到代码中：

<?xml version="1.0" encoding="UTF-8"?>

<iw:iwidget id="GraphContainer" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" supportedModes="view edit"
 lang="en" iScope="GraphContainerScope" title="Graph Container Widget">

<iw:content mode="view">
        <![CDATA[     
            <link rel="stylesheet" href="/Widgets/GraphContainerWidget/css/graphcontainer.css" />
            <script src="/Widgets/GraphContainerWidget/js/jquery.min.js"></script>
            <div id="GraphContainer_IWID_" class="search-area" style="display:block;">
                <div class="content-area" id="content-area_IWID_">
                    <div class="RightPanel" id="rightPanel_IWID_">
                        <table id='main-content_IWID_' class="links-included">
                            <tr>
                                <object type="image/svg+xml" data="" id="_IWID_Graph_Container" class="GraphContainmentArea">
                                    Your browser does not support SVG 
                                </object>
                            </tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr>
                                <td id="_IWID_Graph_Footer" class="FooterContainmentArea">Optional Footer</td>
                            </tr>
                        </table>
                    <div id='footer_IWID_' class="footer">
                    </div>
            </div>
        </div>
    </div>
    <script src="/Widgets/GraphContainerWidget/js/svg-pan-zoom.js"></script>
    <script type="text/javascript">
    var _IWID_attributesItemSet = iContext.getiWidgetAttributes();
    var _IWID_iDescriptor = iContext.getiDescriptor();

    var SVG_GRAPH_URL = _IWID_attributesItemSet.getItemValue("wid_import_field");
    var SVG_FOOTER = _IWID_attributesItemSet.getItemValue("wid_footer_field");
    var SVG_MULTI = _IWID_attributesItemSet.getItemValue("wid_multigraphs_field");

        console.log("Viewmode SRC URL: " + SVG_GRAPH_URL);
try {
    if (SVG_GRAPH_URL !== null && SVG_GRAPH_URL !== "") {
        var finished_URL = httpcheck() + SVG_GRAPH_URL;
        $("#Graph_Container").attr("data", finished_URL);

        setTimeout(function() {
            svgPanZoom("#_IWID_Graph_Container", {
                zoomEnabled: true,
                controlIconsEnabled: true
            });
        }, 2000);
    } else {
        alert("No URL passed to graph container!")
    }
}
catch(e) {
    console.log(e.name + "-" + e.description + "-" + e.message);
}

function httpcheck() {
    if (SVG_GRAPH_URL.substring(0,7) == "http://" || SVG_GRAPH_URL.substring(0,8) == "https://") {
        return "";
    } else {
        return "http://";
    }
}

    </script>
    ]]>
</iw:content>

注意：jQuery是我唯一使用SVG-Pan-Zoom.js之外的库有关如何解决此问题/改进代码的任何提示？我得到的当前错误是svgPan is not defined。

以上代码已更新

Answer 1

很难确定问题的原因，因为他们的示例可能无法复制。

注意：我在我的应用程序上测试了"svg-pan-zoom"并且它正常工作。

您的问题的可能原因：

SVG 和您的信息页需要在＆＃34;同一个域中工作＆＃34;或支持 "CORS"
您正在使用"file URI scheme"，但这会导致安全问题＆＃34; Web浏览器＆＃34;
克隆存储库时可能会出现问题。

解决方案

对于跨域问题（CORS），请阅读以下链接：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
对于＆＃34;文件URI＆＃34;的问题，我建议安装"Xampp" (Apache and PHP)和"Node.js"以便使用"HTTP localhost"
对于＆＃34; git download＆＃34;的问题你需要git clone --recursive git@github.com:ariutta/svg-pan-zoom.git或者如果你已经克隆了它，那么git submodule update --init --recursive

示例宽度＆＃34;数据URI＆＃34;

注意：仅在Firefox中使用，因为在Chrome ＆＃34;数据URI方案＆＃34; 没有发送＆＃34;原始标题＆＃34;

注意：要在Chrome中工作，请使用＆＃34; http URI scheme＆＃34;用于加载SVG

注意：我使用了＆＃34;数据URI＆＃34;因为jsfiddle不支持发送＆＃34;资源＆＃34;

<script src="svg-pan-zoom.js"></script>
<object type="image/svg+xml" id="svgId" data="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjI2NiIgaGVpZ2h0PSIxNzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBNZXRob2QgRHJhdyAtIGh0dHA6Ly9naXRodWIuY29tL2R1b3BpeGVsL01ldGhvZC1EcmF3LyAtLT4KIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSIjZmZmIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iMTczIiB3aWR0aD0iMjY4IiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfNCIgaGVpZ2h0PSI2NCIgd2lkdGg9IjE1My45OTk5OTYiIHk9IjQwIiB4PSI0MyIgb3BhY2l0eT0iMC41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiA8L2c+Cjwvc3ZnPg==">
    Your browser does not support SVG or not loaded (Work only in Gecko - Firefox) 
</object>

<script>
window.onload = function() {
    svgPanZoom("#svgId", {
        zoomEnabled: true,
        controlIconsEnabled: true
    });
};
</script>

在线示例：http://jsfiddle.net/L4u6ap2w/

DOM对象标签上的SVG-Pan-Zoom无法正常工作

1 个答案:

您的问题的可能原因：

解决方案

示例宽度＆＃34;数据URI＆＃34;