CODEWITHSUNDEEP
svg
Ecrin
Ecrin

Reputation: 246

svg create circles

I am new to svg and dont know its structure.I want to create 10 circle in random positions.How can I do this inside a loop like for() loop ?

<g id="rotateSquare">
 <circle cx="100" cy="50" r="20" stroke="black"
  stroke-width="2" fill="goldenrod" />
<text x="110" y="52" fill="red">10</text>
<animateTransform
    attributeType="XML"
    attributeName="transform"
    type="rotate"
    from="0,150,150" to="360,150,150"
    begin="0s" dur="1s"
    repeatCount="1"/>

Upvotes: 0

Views: 526

Answers (1)

RestingRobot
RestingRobot

Reputation: 2978

Try using the following: 

   var svgns = "http://www.w3.org/2000/svg"; 
   var new_circle = document.createElementNS(svgns, "circle");

then after you set the attributes, (cx,cy,r can be randomly generated via a function), you can insert the new node you created into the svg document:

   /*parent elemnt*/.appendChild(new_circle);

You can place this function into a loop and generate as many circles as you want. You could even randomize the colors!

Upvotes: 1

Related Questions