SVG：为每个单元格/矩形生成一个随机填充颜色的网格？

Question

有没有办法生成具有指定列/行的 SVG 网格并为每个单元格提供不同的填充颜色？

Answer 1

首先，您需要考虑如何创建随机颜色。 一个简单的解决方案是使用带有随机色调值的 hsl colors。

function randomColor(){
return `hsl(${ Math.floor(Math.random()* 360)}, 100%, 50%)`
}

您还可以使用随机饱和度和亮度来增强 function。

接下来你需要一个 function 来创建一个矩形 - 即网格的单元格。 这是一个创建矩形的 function。 object o 具有矩形所需的所有属性。

双循环将为网格创建所有 cel。

您可以通过更改宽度和高度（w 和 h 变量）来更改单元格的大小。 您可以通过向 svg 元素添加宽度属性来更改网格的大小。

 const SVG_NS = 'http://www.w3.org/2000/svg'; //size (width and height) of the cell let w = 10,h=10; //generate the grid for(let y = 0; y < 100; y+= h){ for(let x = 0; x < 100; x+= w){ let o = {x:x,y:y,width:w,height:h,fill:randomColor()}; drawRect(o, s) } } //function to generate a random color function randomColor(){ return `hsl(${ Math.floor(Math.random()* 360)}, 100%, 50%)` } //function to create a new svg rect function drawRect(o, parent) { let rect = document.createElementNS(SVG_NS, 'rect'); for (var name in o) { if (o.hasOwnProperty(name)) { rect.setAttributeNS(null, name, o[name]); } } parent.appendChild(rect); return rect; }

 <svg viewBox="0 0 100 100" id="s"></svg>