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:
diesem habe ich bereits ein paar Elemente, die beim Laden der Seite bekannt sind, als einfachen HTML-Text hinzugefügt:
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:
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.
Kennt zufällig jemand einen Weg oder vielleicht sogar ein Tutorial wo eine ähnliche Thematik behandelt wird?
Danke!
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>
HTML Code:
$('#drawing').html(symbolstring);
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; } }
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!