Question

我正在使用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。这是为什么？

Answer 1

如果您使用XMLHttpRequest获取远程HTML网页的内容，则responseText属性是一个包含＆＃34;汤＆＃34;的字符串。所有HTML标签都很难操作和分析。分析此HTML汤字符串有三种主要方法：

使用XMLHttpRequest.responseXML属性。
通过fragment.body.innerHTML将内容注入文档片段的主体，并遍历片段的DOM。
如果您事先知道HTML responseText的内容，则可以使用RegExp。如果使用RegExp扫描关于换行符，则可能需要删除换行符。但是，这种方法是最后的手段＆＃34;因为如果HTML代码略有变化，该方法可能会失败。

参考：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

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

Answer 2

谢谢你们，你们是对的，但事实证明这是一个更好的解决方案。使用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);

排序。

无法在加载的svg上调用getElementsByTagName

2 个答案: