Question

我有一个交互式SVG需要在我的网站上的多个不同位置绘制。目前我可以通过在每个页面上运行它来完成此操作。

$.getScript( UTIL.theme_dir() + '/assets/js/data/lot-plan.js', function() {

    // Plan Interactions
    // Builds the hovers and click events
    obj.planInteractions(lotInfo);

    // When clicking on custom title blocks, highlight approriate units
    $(".custom-title").on('click', function(){
        if( !$(this).hasClass('disabled') ){

            obj.planHighlight(lotInfo, $(this));

        }
    });

    obj.scaleSVG('#lot-plan');

});

但是正如您所看到的，每次都会调用lot-plan.js文件。我一直试图想出一种方法来调用它，并将它的数据存储在var中以便重用。这个批量计划文件是Raphael SVG，因此一旦加载代码，它就会在页面上呈现svg。加载此文件还可以访问“lotInfo”对象，其中包含一些配置内容。

我一直试图用getScript调用该文件并将其存储在变量中，并检查该变量是否已设置，但我无法从文件中访问js，基本上，svg不会呈现

我是否认为这一切都错了？任何人都可以提供任何见解吗？请询问您是否需要更多信息/代码，我很乐意提供。

Answer 1

Juat，如果我想根据上面的评论考虑 XMLHTTPRequest ..

您可以收到一个xml字符串，该字符串可用于在网页上为div填充innerHTML。和/或者您可以将元素作为XML节点使用，然后将它们克隆到本地SVG中。

var  XMLdoc
function loadSVGasXML()
{
    var SVGFile="yourSVGFile.svg"
    var loadXML = new XMLHttpRequest;
    function handler()
    {
        if(loadXML.readyState == 4)
        {
            if (loadXML.status == 200) //---loaded ok---
            {
                //---responseText---
                var xmlString=loadXML.responseText
                //---mySVGDIV.innerHTML=xmlString
                //---DOMParser---
                var parser = new DOMParser();
                XMLdoc=parser.parseFromString(xmlString,"text/xml").documentElement ;
            }
        }
    }
    if (loadXML != null)
    {
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
    }
}

将raphael svg存储在javascript变量中

1 个答案: