Announcement

Collapse
No announcement yet.

SVG -Elemente ind SVG-Dokument hinzufügen

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • SVG -Elemente ind SVG-Dokument hinzufügen

    Hallo Forum,
    ich bin jetzt nicht 100% sicher ob das die richtige Rubrik ist, aber ich versuch's mal.

    Folgende Aufgabenstellung:
    Ich habe ein bestehendes SVG-Dokument ,also folgender Html-Text:

    HTML Code:
    <svg id="drawing"
         title="Layouteditor"
         viewBox="0 0 600 500"
         xmlns="http://www.w3.org/2000/svg" version="2.0"
         preserveAspectRatio="xMidYMid meet"
         onload="makeDraggable(evt)">
    
    </svg>
    diesem habe ich bereits ein paar Elemente, die beim Laden der Seite bekannt sind, als einfachen HTML-Text hinzugefügt:

    HTML Code:
    $('#drawing').html(symbolstring);
    wobei symbolstring mit g-tag gruppierte "Symbole" aus einer Datenbank enthält.
    Nun sollen dieser "Zeichnung" weitere Symbole hinzugefügt werden.

    Ich habe also einen Auswahldialog gebastelt, der als Popup aufgerufen wird und ebenfalls ein svg-Dokument enthält, in dem einige SVG-"Symbole" zur Auswahl angezeigt werden.
    Auswahl klappt soweit, dass ich ein SVG Objekt auswählen kann und dies auch mehr oder weniger willkürlich an die Zeichnung anhängen kann:

    HTML Code:
    var svgDwg = document.getElementById('drawing');
    
        var selectableSymbols = document.getElementsByClassName('variant');  //Symbole mit dieser Klasse sind "auswählbar"
        for (var i = 0; i < selectableSymbols.length; i++) {
            if (selectableSymbols[i].classList.contains('variant') && selectableSymbols[i].classList.contains('selected'))  //dem selektierten Symbol wurde die Klasse selected hinzugefügt
            {
                //Symbol platzieren
                selectableSymbols[i].classList.add('draggable');  //Damit es später verschoben werden kann
                var newSymbol = selectableSymbols[i];
                //##################   Hier sollte die Position zum Symbol ergänzt werden ########################
    
                svgDwg.appendChild(newSymbol);
                break;
            }
        }
    Ich habe schon alles Möglich probiert um dem Symbol eine Position mitzugeben aber es will einfach nichts klappen.
    Die Position ist als Point bereits in einer globalen Variable gespeichert, die mit rechtsclick, vor dem Aufruf des Auswahl-Popups erzeugt wurde.

    Der letzte Versuch war transform.matrix aber wie alle anderen versuche auch ohne Erfolg.
    HTML Code:
    newSymbol.transform.matrix.e = newSymbolPosition.x;
    newSymbol.transform.matrix.f = newSymbolPosition.y;

    Kennt zufällig jemand einen Weg oder vielleicht sogar ein Tutorial wo eine ähnliche Thematik behandelt wird?

    Danke!
Working...
X