如何使用javascript操作SVG节点，使其在MS Edge中工作

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

本文关键字：MS Edge 工作 javascript 何使用 操作 SVG 节点      更新时间：2023-09-26

我有一个内部有linearGradient的svg元素。在某个时候，我需要改变渐变色，所以我这样做：

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吗？

感谢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);
            }
相关文章：