Wie manipulieren SVG-Knoten mit Javascript, so dass es in MS Edge funktionieren würde?

Question

Ich habe ein svg Element mit linearGradient innen. Irgendwann muß ich die Verlaufsfarben ändern, damit ich es so machen:

var stops = []; 
for (var i in description) { 
    stops.push('<stop offset="' + i + '" stop-color="' + description[i] + '"/>'); 
} 
var colorBar = svg.getElementById('colorMapGradient'); 
colorBar.innerHTML = stops.join(''); 

Es funktioniert ziemlich gut in FF und Chrome, aber nicht etwas ändern, wenn meine Seite in Rand geladen wird. Wenn ich es in diesem Browser debugge, sehe ich keine Eigenschaften des colorBar Objekts, einschließlich innerHtml, als ob es kein gewöhnlicher HTML-Knoten ist (ich denke, es ist). In anderen Browsern ist jedoch ein üblicher Satz von Eigenschaften sichtbar. Gibt es also eine Problemumgehung zum Festlegen von Farbstopps auf eine linearGradient in Edge?

Answer 1

Dank Robert Longson, habe ich es durch den Zugriff auf DOM von JavaScript arbeiten:

  var colorBar = svg.getElementById('colorMapGradient'); 
      while (colorBar.firstChild) { 
       colorBar.removeChild(colorBar.firstChild); 
      } 
      for (var i in description) { 
       var stopNode = document.createElementNS('http://www.w3.org/2000/svg', 'stop'); 
       stopNode.setAttribute('offset', i); 
       stopNode.setAttribute('stop-color', description[i]); 
       colorBar.appendChild(stopNode); 
      }