從字符串解析和渲染 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>