javascript - 此内联 svg 将不会显示

Question

我正在使用 js 将 SVG 替换为内联 SVG 图像。

loadInlineSvg: function(className) {
        var svgImgs = [].slice.call(document.getElementsByClassName(className));
        svgImgs.forEach(function(img) {
            var svg = document.createElement('svg'),
            src = img.getAttribute('src'),
            req = new XMLHttpRequest();
            req.addEventListener('readystatechange', function(evt) {
                if(req.readyState === 4) {
                    if(req.status === 200) {
                        svgXML = req.responseXML.getElementsByTagName('svg')[0];
                        for(var j = 0; j < svgXML.children.length; j++) {
                            svg.appendChild(svgXML.children[j]);
                        }
                        for(var i = 0; i < svgXML.attributes.length; i++) {
                            svg.setAttribute(svgXML.attributes[i].name, svgXML.attributes[i].value);
                        }
                        svg.setAttribute('width', img.getAttribute('width'));
                        svg.setAttribute('height', img.getAttribute('height'));
                        img.parentNode.replaceChild(svg, img);
                    }
                }
            });
            req.open('POST', src, true);
            req.send();
        });
    }

ajax 请求生成的 XML 响应与预期完全一致:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewbox="0 0 145 160" version="1.1"><g id="compass" fill="#ffffff">
        <path d="M77.804878,14.0915556 L77.804878,10.6666667 L82.2256098,10.6666667 L82.2256098,2.81288889 C82.2256098,2.81288889 79.9896037,0.0244444444 72.7572866,0.0244444444 C65.5245274,0.0244444444 63.6585366,2.81288889 63.6585366,2.81288889 L63.6585366,10.6666667 L68.0792683,10.6666667 L68.0792683,14.008 C30.0609756,16.2248889 0.0477439024,47.9373333 0.0477439024,86.7386667 C0.0477439024,126.977333 32.5843293,159.597333 72.6083079,159.597333 C112.632287,159.597333 144.894345,126.977333 144.894345,86.7386667 C144.894345,48.3822222 115.381098,16.9488889 77.804878,14.0915556 L77.804878,14.0915556 Z M72.6984909,151.152889 C37.313628,151.152889 8.62794207,122.313778 8.62794207,86.7386667 C8.62794207,51.1635556 37.313628,22.3244444 72.6984909,22.3244444 C108.083796,22.3244444 136.769482,51.1635556 136.769482,86.7386667 C136.769482,122.313778 108.083796,151.152889 72.6984909,151.152889 L72.6984909,151.152889 Z" id="Fill-1"></path>
        <path d="M70.3745122,82.2062222 C67.9983689,83.8395556 67.38875,87.0995556 69.0133689,89.4884444 C70.6375457,91.8773333 73.8805945,92.4897778 76.2567378,90.8564444 C78.6328811,89.2235556 79.2420579,85.9631111 77.617439,83.5746667 C75.9932622,81.1857778 72.7502134,80.5733333 70.3745122,82.2062222" id="Fill-2"></path>
        <path d="M115.190122,44.0191111 C103.840335,32.6084444 88.7497256,26.3244444 72.6984909,26.3244444 C56.6476982,26.3244444 41.5570884,32.6084444 30.2073018,44.0191111 C18.8570732,55.4297778 12.6066006,70.6013333 12.6066006,86.7386667 C12.6066006,102.875556 18.8570732,118.047111 30.2073018,129.457778 C41.5570884,140.868889 56.6476982,147.152889 72.6984909,147.152889 C88.7497256,147.152889 103.840335,140.868889 115.190122,129.457778 C126.539909,118.047111 132.790823,102.875556 132.790823,86.7386667 C132.790823,70.6013333 126.539909,55.4297778 115.190122,44.0191111 L115.190122,44.0191111 Z M65.7000305,92.1311111 L43.2683537,43.0666667 L81.0934604,81.1937778 L103.475625,130.517778 L65.7000305,92.1311111 L65.7000305,92.1311111 Z" id="Fill-3"></path>
    </g></svg>

但是，当附加到页面时，svg 及其子 g 元素的客户端尺寸为 0px、0px，并且不显示任何内容。在 Chrome (38.0.2125.104) 和 Firefox (32.0.3) 中进行测试。有什么建议吗？

更奇怪的是，如果我从 Web 检查器复制上述 svg 输出并将其粘贴到实际的 html 中，它就可以工作。问题是否与我在页面加载后附加 svg 有关？

Answer 1

您不能使用document.createElement('svg')来创建 svg 元素。您只能使用 createElement 创建 html 元素。

它需要进入 SVG 命名空间，这意味着使用 createElementNS('http://www.w3.org/2000/svg', 'svg')