在SVG中动态绘制矩形 [英] Draw rectangles dynamically in SVG
本文介绍了在SVG中动态绘制矩形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何使用SVG绘制100个矩形。
I would like to know how to draw 100 rectangles with SVG.
我用这段代码制作了一个矩形：
I made one rectangle with this code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">
<rect x="50" y="50" width="50" height="50" fill="black" />
</svg>
</body>
</html>
我想绘制100个相同大小，不同位置的矩形（如10行和10行）行）。怎么做得快？一些循环？
I woukd like to draw 100 of rectangles with same size, different position (like 10 in row and 10 rows). How to do it fast? Some loop?
推荐答案
您可以使用以下循环填充屏幕：
You can fill the screen with the following loop:
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个随机放置的方格，您可以执行：
If you just want 100 randomly placed squares, you could do:
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);
}
这篇关于在SVG中动态绘制矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
