javascript - 无法在 Chrome 和 FF 中随机化 HTMLCollection

Question

在下面的示例中，我尝试随机着色 SVG 的“组”元素。尽管在此处运行代码段时出现问题，但代码在 Internet Explorer 中按预期工作。在 Chrome 和 FireFox 中，数组不是随机的。

PS 如果我将 HTML 集合转换为数组，则该代码适用于上述所有浏览器。

/*
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 * 	https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}

function clorize(){
	
	var svgGroups = document.getElementById("svgContainer").getElementsByTagName("g");
	
	shuffleArray(svgGroups);
	console.log(svgGroups);
	
	var red = 3;
	
	for (var i=0; i<svgGroups.length; i++){
		if (i<red){
		svgGroups[i].setAttributeNS (null, 'fill', "#991c1f");	
		}
		else{
		svgGroups[i].setAttributeNS (null, 'fill', "#007777");		
		}
		
	}

}

<div id="svgContainer">
<svg xmlns="http://www.w3.org/2000/svg" style="display: block;" viewBox="0 0 100 100" width="100" height="100">
    <g fill="gray" transform="translate(0)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(35)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(70)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(0 35)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(35 35)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(70 35)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(0 70)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(35 70)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(70 70)">
        <rect width="30" height="30" />
    </g>
</svg>
</div>
<input type="button" onclick="clorize()" value="Colorize SVG">	

标签： javascript