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中工作？

1 个答案: