2014-02-12 96 views
0

我有一個交互式SVG,需要在我的網站上的多個不同位置繪製。目前我可以通過在每個頁面上運行此操作來完成此操作在JavaScript變量中存儲raphael 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沒有渲染。

我對這一切都錯了嗎?任何人都可以提供任何見解嗎?請詢問您是否需要更多信息/代碼,我很樂意提供。

+0

您有興趣首先通過XMLHttpRequest加載svg爲XML嗎? –

回答

0

Juat櫃面你要考慮按照上述我的評論XMLHTTPRequest的 ..

,您可以接收可以用來填補innerHTML的一個事業部的網頁上的XML字符串。和/或您可以將元素作爲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(); 
    } 
}