我试图用DOMParser从字符串解析SVG。如果SVG字符串具有属性xmlns,则元素正确呈现。否则浏览器不会渲染它,但元素存在于DOM中(它在开发工具中可见)。
在此示例中,仅渲染第一个元素: https://jsfiddle.net/Severn101/jatkyvw7/
var circle1 = '<circle cx="25" cy="25" r="25" xmlns="http://www.w3.org/2000/svg" />';
var circle2 = '<circle cx="25" cy="25" r="25" />';
var svgElement = document.getElementById('svg');
var parser = new DOMParser();
var doc1 = parser.parseFromString(circle1, "image/svg+xml").documentElement;
var doc2 = parser.parseFromString(circle2, "image/svg+xml").documentElement;
svgElement.appendChild(doc1);
svgElement.appendChild(doc2);
为什么会发生这种情况以及如何解析没有mlns属性的svg字符串?
答案 0 :(得分:0)
使用DOMParser
创建元素时,会将它们创建为html
元素,而不是svg
元素。因此,即使将其添加到DOM中,它也不会显示。
在第一个圆圈中,添加一个namspace
。表示它是xml
,这就是为什么它出现在您的小提琴中的原因。 (但是,对于两个圆圈,您拥有相同的cx
和cy
,因此即使它们都将被渲染,您也只会看到一个,因为它们会彼此重叠)
但是如果您将其作为字符串使用,为什么不只使用innerHTML
?
innerHTML=circle1
用于替换,innserHTML+=circle1
用于附加
var circle1 = '<circle cx="50" cy="25" r="25" fill="green"/>';
var circle2 = '<circle cx="100" cy="25" r="25" fill="red"/>';
var svgElement = document.getElementById('svg');
svgElement.innerHTML += circle1+circle2;
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 50" id="svg"></svg>