I have a challenge, where i am trying to create 9 circles in each rectangle (4 in each corner, 4 on the sides and 1 in the middle) at the same time after immediately creating a rectangle. In my approach, 4 circles are created with a rectangle, which is not desired!
- Each rectangle should contain 9 circles (4 in each corner, 4 on the sides and 1 in the middle) at same time when it will be created.
- To be more precise, 9 circles are desired at the same time when each rectangle is created.
- I used snap.svg library to create circles and rectangles.
- You can use following code snippet.
const svgId = 'campus_map';
const width = document.getElementById(svgId).viewBox.baseVal.width;
const height = document.getElementById(svgId).viewBox.baseVal.height;
let draw = Snap("#tiles");
let c = 0;
let size = Math.round(0.05 * width);
let circleSize = 25;
let circleColor = ["#ff0000", "#000000", "#00ffe1", "#0051ff"];
let svg = document.getElementById(svgId);
for (let i = 0; i <= width; i = i + size) {
for (let j = 0; j <= height; j = j + size) {
c += 1;
let rect = draw.rect(i, j, size, size);
let circle1 = draw.circle(i, j, circleSize);
let circle2 = draw.circle(i + (size / 2), j, circleSize);
let circle3 = draw.circle(i, j + (size / 2), circleSize);
let circle4 = draw.circle(i + (size / 2), j + (size / 2), circleSize);
rect.attr({
fill: "#d00bf3",
"fill-opacity": 0.2,
stroke: "#000",
"stroke-width": "1px",
id: "rect_" + c,
name: "rect" + c
});
circle1.attr({
fill: circleColor[0],
"fill-opacity": 1,
stroke: "#000",
"stroke-width": "1px",
id: "circle1_" + c,
name: "circle1_" + c
});
circle2.attr({
fill: circleColor[1],
"fill-opacity": 1,
stroke: "#000",
"stroke-width": "1px",
id: "circle2_" + c,
name: "circle2_" + c
});
circle3.attr({
fill: circleColor[2],
"fill-opacity": 1,
stroke: "#000",
"stroke-width": "1px",
id: "circle3_" + c,
name: "circle3_" + c
});
circle4.attr({
fill: circleColor[3],
"fill-opacity": 1,
stroke: "#000",
"stroke-width": "1px",
id: "circle4_" + c,
name: "circle4_" + c
});
}
}<script src="https://unpkg.com/[email protected]"></script>
<svg viewBox="0 0 8204.08 6413.17" version="1.1" id="campus_map"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g id="tiles"></g>
</svg>
In your loop, you only create four circles per tile. If you added five more your code would work. What is stopping you from doing that?
It sounds like you want the circles to be inside the square. To achieve that, you need to move the circles in by one circle radius.
Here's some modified code where I calculate that offset and use a loop to position the nine circles.