DragDrop mehrerer Shapes im SVG per Javascript?

Diskutiere DragDrop mehrerer Shapes im SVG per Javascript? im HTML / CSS / JScript / AJAX Forum; Ich habe ein SVG. In diesem SVG gibt es Shapes, die mit Text (genauer: einem einzelnen Buchstaben) zusammen verschoben werden sollen. Bisher kann...

  1. AliasAlreadyTaken
    AliasAlreadyTaken Neues Mitglied
    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:

    Code (XML):

    <?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.

    Code (Javascript):

    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
     
Die Seite wird geladen...

DragDrop mehrerer Shapes im SVG per Javascript? - Ähnliche Themen

DragDropped für jede Node
DragDropped für jede Node im Forum AWT, Swing, JavaFX & SWT
Drag and Drop mehrerer File aus Explorer in JTable
Drag and Drop mehrerer File aus Explorer in JTable im Forum Allgemeine Java-Themen
Berechnen mehrerer Map-Werte
Berechnen mehrerer Map-Werte im Forum Java Basics - Anfänger-Themen
Auslesen mehrerer jComboBox (-en)
Auslesen mehrerer jComboBox (-en) im Forum Java Basics - Anfänger-Themen
Drag&Drop mehrerer TreeViews oder TableViews
Drag&Drop mehrerer TreeViews oder TableViews im Forum AWT, Swing, JavaFX & SWT
Thema: DragDrop mehrerer Shapes im SVG per Javascript?