html画矩形svg,JavaScript – 在SVG中动态绘制矩形

您可以使用以下循环填写屏幕：

var svgns = "http://www.w3.org/2000/svg";

for (var x = 0; x < 5000; x += 50) {

for (var y = 0; y < 3000; y += 50) {

var rect = document.createElementNS(svgns, 'rect');

rect.setAttributeNS(null, 'x', x);

rect.setAttributeNS(null, 'y', y);

rect.setAttributeNS(null, 'height', '50');

rect.setAttributeNS(null, 'width', '50');

rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));

document.getElementById('svgOne').appendChild(rect);

}

}

如果你只想要100个随机放置的方格,你可以做：

for (var i = 0; i < 100; i++) {

var x = Math.random() * 5000,

y = Math.random() * 3000;

var rect = document.createElementNS(svgns, 'rect');

rect.setAttributeNS(null, 'x', x);

rect.setAttributeNS(null, 'y', y);

rect.setAttributeNS(null, 'height', '50');

rect.setAttributeNS(null, 'width', '50');

rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));

document.getElementById('svgOne').appendChild(rect);

}