How to move element arround a circle

Question

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 deg. The .loader-marker should rolling around the biggest circle and mark the numbers. I can calculate the skew and scale based on the angle, but I cant find a way to calculate the translate(XY) position based on thus I have. The code example is here

var loadedAngel = 60;
var angelRadians = 60 * (Math.PI / 180);
var radius = 178;
var cx = 260;
var cy = 264;
var matrix=[1,0,0,1,0,0];

var svg = document.getElementById("box-loader-svg");
var loader = document.getElementById("path-loader");
var marker = document.getElementById('loader-marker');

document.getElementById("path-loader").setAttribute("d", describeArc(cx, cy, radius, 0, loadedAngel));

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

// for example
// rotate 60 degrees clockwise from 0 degrees
// so the .loader-marker element should mark text "2nd" in my case
rotate(loadedAngel*Math.PI/180);

// plug our transform array into the <g>
marker.setAttribute('transform', 'matrix(' + matrix.join(', ') + ')');

// do the scale to the array
function scale(x,y){
    matrix[0] *= x;
    matrix[1] *= x;
    matrix[2] *= y;
    matrix[3] *= y;    
}

// do the rotate to the array
function rotate(radians){
    var cos = Math.cos(radians);
    var sin = Math.sin(radians);
    var m11 = matrix[0] * cos + matrix[2] * sin;
    var m12 = matrix[1] * cos + matrix[3] * sin;
    var m21 = -matrix[0] * sin + matrix[2] * cos;
    var m22 = -matrix[1] * sin + matrix[3] * cos;
    matrix[0] = m11;
    matrix[1] = m12;
    matrix[2] = m21;
    matrix[3] = m22;   
}

body {
  background: #000;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 520" class="box-loader-svg">
    <g class="loader-circles">
        <g transform="rotate(-90 260 264)">
            <circle class="loader-outer"
                    cx="260"
                    cy="264"
                    r="200"
                    fill="none"
                    stroke="#64d3de"
                    stroke-miterlimit="10"
                    opacity="0.6"
                    transform="matrix(1,0,0,1,0,0)"
                    style="stroke-dashoffset: 1e-05; stroke-dasharray: none;">
            </circle>
        </g>
        <g transform="rotate(-90 260 264)">
            <circle class="loader-track"
                    cx="260"
                    cy="264"
                    r="178"
                    fill="none"
                    stroke="#50afb8"
                    stroke-miterlimit="10"
                    stroke-width="20"
                    transform="matrix(1,0,0,1,0,0)"
                    style="stroke-dashoffset: 1e-05; stroke-dasharray: none;">
            </circle>
        </g>
        <g transform="rotate(-90 260 264)">
            <circle class="loader-track-perc"
                    cx="260"
                    cy="264"
                    r="178"
                    fill="none"
                    stroke="#fff"
                    stroke-miterlimit="10"
                    stroke-width="20"
                    transform="matrix(1,0,0,1,0,0)"
                    style="stroke-dashoffset: 0; display: none;">
            </circle>
        </g>
        <g>
            <path id="path-loader" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width="20" d="">
            </path>
        </g>
    </g>
    <g class="loader-stages" fill="#64d3de">
        <rect x="260" y="55" width="1" height="9" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></rect>
        <rect x="260" y="55" width="1" height="9" transform="matrix(0.5,-0.86602,0.86602,0.5,-98.38070659909181,357.5996176858462)" style="transform-origin: 0px 0px 0px;"></rect>
        <rect x="260" y="55" width="1" height="9" transform="matrix(-0.5,-0.86602,0.86602,-0.5,162.11929340090836,621.5996176858464)" style="transform-origin: 0px 0px 0px;"></rect>
        <rect x="260" y="55" width="1" height="9" transform="matrix(-1,0,0,-1,521,528)" style="transform-origin: 0px 0px 0px;"></rect>
        <rect x="260" y="55" width="1" height="9" transform="matrix(-0.49999,0.86602,-0.86602,-0.49999,619.3807065990918,170.40038231415366)" style="transform-origin: 0px 0px 0px;"></rect>
        <rect x="260" y="55" width="1" height="9" transform="matrix(0.5,0.86602,-0.86602,0.5,358.88070659909175,-93.59961768584628)" style="transform-origin: 0px 0px 0px;"></rect>
    </g>
    <g class="loader-stages-text" fill="#fff" font-size="18">
        <text x="250" y="44">6th</text>
        <text x="445" y="155">1st</text>
        <text x="445" y="385">2nd</text>
        <text x="250" y="496">3th</text>
        <text x="50" y="385">4th</text>
        <text x="50" y="155">5th</text>
    </g>
    <g class="voc-word">
        <text x="50%"
              y="50%"
              stroke="none"
              text-anchor="middle"
              stroke-width="1px"
              dy=".3em"
              fill="#fff"
        >
            text
        </text>
    </g>
    <g id="loader-marker">
        <g class="loader-marker-pointer">
            <circle cx="260" cy="35" fill="none" r="20" stroke="#fff" stroke-width="2"></circle>
        </g>
        <rect class="loader-marker-line" fill="#fff" height="35" width="2" x="260" y="55"></rect>
    </g>
</svg>

Answer 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.):

<g class="loader-marker" stroke="#fff" stroke-width="2" fill="none">
    <circle x="260" y="35" r="20" />
    <path d="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;

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