Javascript Can'；t在加载的svg上调用getElementsByTagName

我正在使用XMLHttpRequest加载SVG，但似乎无法解析它。这是我加载它的方式

    var svgDoc;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "data/vectors.svg", true);
    xhr.onload = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                svgDoc = xhr.responseText;
                console.log(svgDoc.getElementsByTagName("svg"));
            } else {
                console.error(xhr.statusText);
            }
        }
    };
    xhr.onerror = function (e) {
        console.error(xhr.statusText);
    };
    xhr.send(null);

---

它抛出了未捕获的TypeError：undefined不是一个函数。当我尝试console.log（svgDoc.getElementsByTagName）时，我得到的只是“未定义”。这就像我不能在SVG上调用任何XML DOM方法一样——尽管SVG只是XML。这是为什么？

如果使用XMLHttpRequest获取远程HTML网页的内容，responseText属性是一个字符串，包含所有HTML标记的“汤”，很难操作和分析。有三种主要方法可以分析此HTML soup字符串：

使用XMLHttpRequest.responseXML属性

通过fragment.body.innerHTML将内容注入文档片段的主体，并遍历片段的DOM

如果您总是事先知道HTML responseText的内容，则可以使用RegExp。如果使用RegExp扫描换行符，则可能需要删除换行符。但是，此方法是“最后的手段”，因为如果HTML代码稍微更改，该方法可能会失败

参考：

---

---

在您的例子中，出现未定义的错误是因为responseText只是一个字符串（不是dom元素）。

谢谢大家，您是正确的，但事实证明有更好的解决方案。使用DOMParser将字符串解析为DOM对象，然后对其调用DOM方法，如下所示：

 var svg;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "data/vectors.svg", true);
    xhr.onload = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                var svgStr = xhr.responseText;
                var parser = new DOMParser;
                var svgDoc = parser.parseFromString(svgStr, "text/xml");
                svg = svgDoc.getElementsByTagName("svg")[0];
                console.log(svg);
                var viewBox = (svg.getAttribute('viewBox').split(' '));
                offsetX = -parseInt(viewBox[2] / 2 + parseInt(viewBox[0]));
                offsetY = parseInt(viewBox[3] / 2) + parseInt(viewBox[1]);
                var sectionsXml = $(svg).find('g[id*="section"]');
                for (var i = 0; i < sectionsXml.length; i++){
                    var sect = new section(sectionsXml[i]);
                    sect.position.setX(offsetX);
                    sect.position.setY(offsetY);
                    scene.add(sect);
                }
            } else {
                console.error(xhr.statusText);
            }
        }
    };
    xhr.onerror = function (e) {
        console.error(xhr.statusText);
    };
    xhr.send(null);

var；
var xhr=new XMLHttpRequest（）；
open（“GET”，“data/vectors.svg”，true）；
xhr.onload=函数（e）{
if（xhr.readyState==4）{
如果（xhr.status==200）{
var svgStr=xhr.responseText；
var parser=新的DOMParser；
var svgDoc=parser.parseFromString（svgStr，“text/xml”）；
svg=svgDoc.getElementsByTagName（“svg”）[0]；
log（svg）；
var viewBox=（svg.getAttribute（'viewBox'）.split（''）；
offsetX=-parseInt（viewBox[2]/2+parseInt（viewBox[0]）；
offsetY=parseInt（viewBox[3]/2）+parseInt（viewBox[1]）；
var sectionsXml=$（svg.find（'g[id*=“section”]”）；
对于（变量i=0；i

---

排序。

svgDoc=xhr.responseText

表示

svgDoc

是字符串，字符串没有

getElementsByTagName

方法