CODEWITHSUNDEEP
javascriptsvg
Jbird
Jbird

Reputation: 2886

This inline svg won't display

I'm using js to replace SVGs as images with inline 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();
        });
    }

The resulting XML response from the ajax request is exactly as expected:

<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>

However, when appended to the page the svg and its child g element has client dimensions of 0px, 0px and nothing is displaying. Testing in Chrome (38.0.2125.104) and Firefox (32.0.3). Any suggestions?

Even stranger, if I copy the above svg output from a web inspector and paste it into the actual html, it works. Is the problem related to the fact that I'm appending the svg after page load???

Upvotes: 1

Views: 1427

Answers (1)

Robert Longson
Robert Longson

Reputation: 124324

You can't use document.createElement('svg'), to create an svg element. You can only use createElement to create html elements.

It needs to go in the SVG namespace which means using createElementNS('http://www.w3.org/2000/svg', 'svg')

Upvotes: 2

Related Questions