从字符串中解析并渲染SVG

时间:2017-08-28 18:08:26

标签: javascript

我试图用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字符串?

1 个答案:

答案 0 :(得分:0)

使用DOMParser创建元素时,会将它们创建为html元素,而不是svg元素。因此,即使将其添加到DOM中,它也不会显示。

在第一个圆圈中,添加一个namspace。表示它是xml,这就是为什么它出现在您的小提琴中的原因。 (但是,对于两个圆圈,您拥有相同的cxcy,因此即使它们都将被渲染,您也只会看到一个,因为它们会彼此重叠)

但是如果您将其作为字符串使用,为什么不只使用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>