I have just started learning about SVGs and wanted to create a for loop to draw many circles in my HTML. Can it be done the way I'm trying to do it, or is what I'm trying to do not possible?
<html>
<body>
<h1>My first SVG for loop</h1>
<script type="text/javascript">
var circlex = 50;
var circley = 50;
for (var i = 0; i < 100; i++) {
<svg width="100" height="100">
<circle cx="circlex + 1" cy="circley + 1" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
};
</script>
</body>
</html>
I have just started learning about SVGs and wanted to create a for loop to draw many circles in my HTML. Can it be done the way I'm trying to do it, or is what I'm trying to do not possible?
<html>
<body>
<h1>My first SVG for loop</h1>
<script type="text/javascript">
var circlex = 50;
var circley = 50;
for (var i = 0; i < 100; i++) {
<svg width="100" height="100">
<circle cx="circlex + 1" cy="circley + 1" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
};
</script>
</body>
</html>
- 1 You need to ask follow up questions separately so as not to invalidate the existing answers. – Robert Longson Commented Dec 11, 2015 at 22:31
2 Answers
Reset to default 8You cannot put html code directly into JavaScript (that would be cool)
The way JavaScript adds new elements is through DOM manipulation.
So let's go trough the code:
- First created an empty SVG document with an xmlns (just set
xmlns="http://www.w3.org/2000/svg", it works 99% of the time) and we need an ID to select the element. - Get the SVG element in JavaScript:
document.getElementById("svg_circles"). Here we use the ID we set on the element to save it to a variable. - In the for loop: create a circle element:
var circle = document.createElementNS(NS, "circle");The namespaceNSis found in 1. it'shttp://www.w3.org/2000/svg. This seems complex but is needed and just something you have to memorize. - Set circle attributes: now to the attributes: I set the position
cxandcywith.setAttribute(). You can try to position them differently. I also set the sizerattribute and the fill (the long line of code on the fill is just for fun on my part, it creates random colors) - Now we are done with the circles, but the JavaScript code does not know where to put them. So we tell it:
svgCircle.appendChild()sets the element as a child of our SVG document. So:svgCircle.appendChild(circle);where circle is the created SVG element.
document.addEventListener("DOMContentLoaded", function(event) {
var circlex = 0;
var circley = 0;
var svgCircle = document.getElementById("svg_circles");
var NS = "http://www.w3.org/2000/svg";
for (var i = 0; i < 100; i++) {
var circle = document.createElementNS(NS, "circle");
console.log(circle);
circle.setAttribute("cx", circlex + i);
circle.setAttribute("cy", circley + i);
circle.setAttribute("r", 10);
circle.setAttribute("fill", "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")");
svgCircle.appendChild(circle);
};
});<svg id="svg_circles" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
</svg>It is little bit more complex than in your example. Here is a fiddle where I converted your pseudo-code into javascript code. This approach could be ok if you are using some server side rendering e.g. .NET MVC and then iterates on svg elements. But in javascript, you need to create DOM elements, pass the configuration, and then append that to the DOM. Here is an example: https://jsfiddle.net/9c7ro6x3/1/
var circlex = 50;
var circley = 50;
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
for (var i = 0; i < 100; i++) {
circlex = circlex + 1;
circley = circley + 1;
var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
circle.setAttribute("cx", circlex);
circle.setAttribute("cy", circley);
circle.setAttribute("r", "40");
circle.setAttribute("stroke", "green");
circle.setAttribute("strokeWidth", 4);
circle.setAttribute("fill", "yellow");
svg.appendChild(circle);
};
document.body.appendChild(svg);