How To Move Element Arround A Circle

I'm new here ;]. How can I calculate the translateX & translateY position in matrix() on .loader-marker element. I have the angle, it might be 0, 60, 120, 180, 240, 300, 360 de

Solution 1:

Your rotation center is at (260, 264). Your .loader-marker could, for example, originally be shown centered on the legend "6th", at (260, 35) (approx.):

<gclass="loader-marker"stroke="#fff"stroke-width="2"fill="none"><circlex="260"y="35"r="20" /><pathd="M 260 55 260 90"transform="rotate(45, 260, 35)" /></g>

Then placing the marker at legend "nth" without it loosing its orientation can be expressed as

var marker = document.getElementById('loader-marker');

var cx = 260,
    cy = 264,
    mx = 260,
    my = 35;

functionpositionMarker (number) {
    var angle = 60 * number;
    var transform = 'rotate(' + angle + ' cx cy) rotate(-' + angle + ' mx my)';
    marker.setAttribute('transform', transform);
}