SVGで100個の長方形を描く方法を知りたいと思います。SVGで矩形を動的に描画
私はこのコードを使用すると、ワン矩形をした：
<!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>
Iは同じサイズ（行10と10行など）の異なる位置に矩形の100を描画したいwoukd。どのように速くそれを行うには？いくつかのループ？
あなたは、次のループで画面を埋めることができます：あなただけの100個のランダムに配置された正方形をしたい場合は、あなたができる
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);
}
}
：
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);
}
は、ライブラリANを使用していますあなたはストレートJavaScriptでこれをしたいのですか？ – nrabinowitz
ライブラリを使ってこれは完全に過剰になる – saml