Question

I am making a clock using Raphael with my own. I created a big circle which is for clock, and i need to create the other three bullets for 12,3,6,9 hrs. now how can i create the circle, which is child of the big one. (how can i append the small circles to big one)?

i wrote this function to made that, but no use. it makes the small circles as absolute. how can i create the small circles as relative to parent?

my function :

    window.onload = function(){
    var paper = new Raphael ('clock',500,500);
    var circle = paper.circle(250,250,200);
    circle.node.id="clock";
    circle.attr({
    stroke:"#f00"
   })

   var num = new Raphael(document.getElementById('clock'),400,400);
   var graydot = num.circle(10,100,5);
   graydot.attr({fill:"#000"});
}

any one can help me? or let me know about parent child relation ship of svg… pls!

Answer 1

I don’t think that Raphael caters for hierarchies of objects in the manner you speak of. The best you can do is group objects together into sets if you want to treat the objects as one.

As for creating the other three nodes, you can clone your first dot and rotate 90 degrees around the centre of your clock. Do that three times and you’ll have your clockface.

Here’s a fiddle that illustrates the idea.