Raphael creating circle relative to parent - raphael

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.

Answer 2

First of all, you don't have to declare multiple different Raphael instances. Just use one on top of which you build your clock.
Moreover, there is no "parent child relation ship of svg" your two shapes are siblings( only if you insert them into the same Raphael instance).
The only thing that they have in common is that they are attached to the same svg - take a look at the resulting sgv :
<svg height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg" style="overflow-x: hidden; overflow-y: hidden; position: relative; ">
<desc>Created with Raphaël 2.0.0</desc>
<defs></defs>
<circle cx="250" cy="250" r="200" fill="none" stroke="#ff0000" id="clock" style=""></circle>
<circle cx="10" cy="100" r="5" fill="#000000" stroke="#000" style=""></circle>
</svg>
What I'm trying to say is that it's normal for the circle to be positioned "absolute".
If you want to position the 4 circles relative to the big one, you should calculate their centers manually :
var paper = new Raphael('clock', 500, 500);
var circle = paper.circle(250, 250, 200);
var graydot = paper.circle(circle.attrs.cx - circle.attrs.r + 10, circle.attrs.cy, 10 );
Here's a live example : http://jsfiddle.net/gion_13/4p7Np/