title: SVG equivalent of movieclip
body: <p>I'm working on a Flash project that has to be translated to HTML5 and SVG. In Flash there is something called a movieclip. A movieclip can be like a <code>class</code> inside a Flash movie.</p>
  
  <p>So, if I wanted to make a swarm of butterflies...</p>
  
  <ul>
  <li><p>I would create one butterfly class / MovieClip with <code>variable</code> definitions of class properties behaviour (such as flapping wings, random movement and maybe obstacle avoidance). </p></li>
  <li><p>After that I just throw a lot of butterfly movieclips on the screen and watch them do their thing. </p></li>
  </ul>
  
  <p>For example: Using a <code>For-loop</code> I could spawn multiple instances of the class like so...</p>
  
  <pre><code>for (int i = 0; i &lt; 30; i++)
  {
      my_Butterfly = new ButterFly();
  
      my_Butterfly.graphics = SVG_referenced_HERE;
      my_Butterfly.flappingwings = true;
      my_Butterfly.flapspeed = 10;
      my_Butterfly.x = math.random(i * 40);
      my_Butterfly.y = math.random(i * 20);
  
  }
  </code></pre>
  
  <p>My Question:</p>
  
  <p>How can I create a class in JavaScript where the visual element is an SVG animation and that same visual element can be controlled by other class properties such as the <code>.x</code> and <code>.y</code> positions?</p>
  
  <hr>
  
  <p>Now, with SVG this seems to be much more complicated because I don't know how make something that resembles a movieclip. </p>
  
  <p>I would put a hand full of references to the butterfly SVG in an HTML document and then, somehow, animate them all at the same time with code that manages all the butterflies, but that is not very elegant compared to the movieclip mechanism. In other words: It's not suited to build complex animations</p>
  
  <p>I have asked a similar question a while ago:
  <a href="https://stackoverflow.com/questions/53684718/svg-symbol-with-script-changes-all-the-use-clones">Previous question</a></p>
  
  <p>Any ideas?</p>