SVG equivalent of movieclip

Question

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 class inside a Flash movie.

So, if I wanted to make a swarm of butterflies...

• I would create one butterfly class / MovieClip with variable definitions of class properties behaviour (such as flapping wings, random movement and maybe obstacle avoidance).

• After that I just throw a lot of butterfly movieclips on the screen and watch them do their thing.

For example: Using a For-loop I could spawn multiple instances of the class like so...

for (int i = 0; i < 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);

}

My Question:

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 .x and .y positions?

---

Now, with SVG this seems to be much more complicated because I don't know how make something that resembles a movieclip.

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

I have asked a similar question a while ago: Previous question

Any ideas?

Answer 1

You can define your animation as a resource in <defs> tags and then use <use> to place it wherever you want, like:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="myAnimation" class="wavingPath" d="M0,0C0,-20,100,20,100,0" stroke="black">
            <animate attributeName="d" attributeType="XML" from="M0,0C0,-20,100,20,100,0" to="M0,0C0,20,100,-20,100,0" dur="1s" repeatCount="indefinite"/>
        </path>
    </defs>
    <use x="10" y="10" xlink:href="#myAnimation" />
    <use x="100" y="100" xlink:href="#myAnimation" />
</svg>

That is probably the ugliest image I've ever created but it shows the concept. Two copies of the same animation. You can use css animation instead. The resource you define can be a group object containing many paths you animate.