从字符串解析和渲染 SVG

Question

我正在尝试使用 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 字符串？

Answer 1

当您使用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>