拖动svg元素组

Question

我正在尝试拖动一个带有数字的圆圈，这是一个svg覆盖图像。

使用此示例（http://www.petercollingridge.co.uk/interactive-svg-components/draggable-svg-element），它适用于圆圈。但是当我拖动它时，我需要圆圈和圆圈内的文本（数字）移动，所以我希望组同时移动。

        <div>
        <p>Image inside svg:</p>
        <svg xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="400">
                <image  x="0" y="0" width="800" height="400" xlink:href="myimage.png"/>
            <a xlink:href="/svg/index.html" target="_top">
                <g>
                <circle cx="100" cy="100" r="20" fill="red"
                    class="draggable"
                    transform="matrix(1 0 0 1 0 0)"
                    onmousedown="selectElement(evt)"></circle>
                <text x="100" y="100" text-anchor="middle" stroke="#fff" stroke-width="2px" dy=".3em" style="font-size: 1.5em;">1</text>
                </g>
            </a>
        </svg>
    </div>

这是javascript：

    var selectedElement = 0;
var currentX = 0;
var currentY = 0;
var currentMatrix = 0;

function selectElement(evt) {
    selectedElement = evt.target;
    currentX = evt.clientX;
    currentY = evt.clientY;
    currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7, -1).split(' ');

    for (var i = 0; i < currentMatrix.length; i++) {
        currentMatrix[i] = parseFloat(currentMatrix[i]);
    }

    selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
    selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
    selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
}

function moveElement(evt) {
    dx = evt.clientX - currentX;
    dy = evt.clientY - currentY;
    currentMatrix[4] += dx;
    currentMatrix[5] += dy;
    newMatrix = "matrix(" + currentMatrix.join(' ') + ")";

    selectedElement.setAttributeNS(null, "transform", newMatrix);
    currentX = evt.clientX;
    currentY = evt.clientY;
}

function deselectElement(evt) {
    if (selectedElement != 0) {
        selectedElement.removeAttributeNS(null, "onmousemove");
        selectedElement.removeAttributeNS(null, "onmouseout");
        selectedElement.removeAttributeNS(null, "onmouseup");
        selectedElement = 0;
    }
}

我对操纵svg并不是很熟悉，但它几乎可以完成我所需要的一切，并且我将非常感谢任何有关如何让整个小组同时移动的想法。