DragDrop mehrerer Shapes im SVG per Javascript?

[AliasAlreadyTaken]

Ich habe ein SVG. In diesem SVG gibt es Shapes, die mit Text (genauer: einem einzelnen Buchstaben) zusammen verschoben werden sollen.

Bisher kann ich einzelne Shapes verschieben, aber nicht zusammen mit dem Text. Gibt es da irgendeinen Trick, auf den ich grade nicht komme?

Ich habe versucht, Text und Shape per group zusammenzuhalten, aber eine group hat keine Koordinaten.

So schaut mein SVG aus:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' baseProfile='full' viewBox='0 0 416 416' onload='makeDraggable(evt)'>
    <title>ANTPQ</title>
    <defs>
<pattern id='grid' width='16' height='16' patternUnits='userSpaceOnUse'>
            <rect width='80' height='80' fill='none'/>
            <path d='M 80 0 L 0 0 0 80' fill='none' stroke='gray' stroke-width='1'/>
        </pattern>
    </defs>
    <rect width='100%' height='100%' fill='url(#grid)' />

    <!--shapes-->

    <circle cx='104' cy='328' r='8' fill='green' class="draggable">
        <title>Token</title>
    </circle>
    <text x='104' y='328' font-family='Verdana' font-size='12.8' fill='white' alignment-baseline='middle' text-anchor='middle'>
        <title>Token</title>T</text>

</svg>

Das da ist bisher mein JavaScript Code. Damit kriege ich zwar den grünen Kreis verschoben, nicht aber den Text.

function makeDraggable(evt) {
    var svg = evt.target;
    svg.addEventListener('mousedown', start);
    svg.addEventListener('mousemove', drag);
    svg.addEventListener('mouseup', end);
    svg.addEventListener('mouseleave', end);

    function getMousePosition(evt) {
        var CTM = svg.getScreenCTM();
        return {
            x: (evt.clientX - CTM.e) / CTM.a,
            y: (evt.clientY - CTM.f) / CTM.d
        };
    }

    var selectedElement, offset;

    function startDrag(evt) {
        if (evt.target.classList.contains('draggable')) {
            selectedElement = evt.target;
            offset = getMousePosition(evt);
            offset.x -= parseFloat(selectedElement.getAttributeNS(null, "cx"));
            offset.y -= parseFloat(selectedElement.getAttributeNS(null, "cy"));
        }
    }

    function drag(evt) {
        if (selectedElement) {
            evt.preventDefault();
            var coord = getMousePosition(evt);
            selectedElement.setAttributeNS(null, "cx", coord.x - offset.x);
            selectedElement.setAttributeNS(null, "cy", coord.y - offset.y);
        }
    }

    function endDrag(evt) {
        selectedElement = null;
    }
}

Gibt es da eine schönere Lösung als eine group und dann alle Elemente darin suchen und dann "mitverschieben" ?

Btw: Ich darf keine externe Bibliothek verwenden. Teile des Codes sind von verschiedenen ähnlichen Lösungen zusammengebastelt