2015-02-23 92 views
0

我想要在加载文件以供交互使用后访问svg的id及其路径。我用一个函数加载SVG并将节点导入到DOM。无论是在document.ready也不在document.addEventListener(“DOMContentLoaded”,function(event)我能够通过它的id获取该元素。获得它的唯一方法是设置交互式代码周围的超时。无法通过其ID访问SVG

我要的是,SVG(900KB)UND的DOM所有其他代码之前应该加载被加载。但是到现在为止我不能找到一个fiting解决方案。

我很困惑,因为如果我看在浏览器中使用萤火虫的DOM我能够看到与ID的div,但我不能得到它....而我无法找到我的代码中的问题,因为我将它加载到DOM中,并在DOM准备好后访问它吗? 任何人在这里找到olution?

这是我的代码加载SVG:

function fetchXML (url, callback) { 
     var xhr = new XMLHttpRequest(); 
     xhr.open('GET', url, true); 
     xhr.onreadystatechange = function (evt) { 

     if (xhr.readyState === 4) { 
      callback(xhr.responseXML);   
     } 

     }; 
     xhr.send(null); 
    }; 

    fetchXML("svg/bez_grey.svg",function(newSVGDoc){ 
     var n = document.importNode(newSVGDoc.documentElement,true); 
     var mysvg = document.getElementById("map"); 

     mysvg.appendChild(n); 

    }) 

document.addEventListener("DOMContentLoaded", function(event) { 

// Access the SVG-Elements here 

}): 

回答

0

你需要调用var mysvg = document.getElementById("map");之前调用document.documentElement.appendChild(n);。这会将n加载到document的DOM中。您可以删除声明mysvg.appendChild(n);

该解决方案是基于工作的代码示例在这里:https://stackoverflow.com/a/3378320