如何使用 javascript 操作 SVG 节点以便它在 MS Edge 中工作？

Question

我有一个 svg 元素，里面有 linearGradient。在某些时候，我需要更改渐变颜色，所以我这样做：

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('');

它在 FF 和 Chrome 中工作得很好，但是当我的页面在 Edge 中加载时没有任何改变。当我在那个浏览器中调试它时，我看不到 colorBar 对象的任何属性，包括 innerHtml，就好像它不是一个普通的 HTML 节点（我猜是）。然而，一组常用的属性在其他浏览器中是可见的。那么是否有任何解决方法可以在 Edge 中将色标设置为 linearGradient？

Answer 1

感谢 Robert Longson，我通过从 javascript 访问 DOM 使其工作：

            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);
            }

如何使用 javascript 操作 SVG 节点以便它在 MS Edge 中工作？

How to manipulate SVG nodes with javascript so that it would work in MS Edge?

html

javascript

svg

microsoft-edge