nicht angemeldet mathefritz
Gunnar Bittersmann
mathefritz
mathefritz
mathefritz
Rolf B
Gunnar Bittersmann
JürgenB
<!DOCTYPE html><html lang="de"> <meta charset="utf-8">
<body contenteditable><!--==================================================================-->
xxxxx
<div id = 'T' contenteditable
style="border: 1px solid black; display:inline-block;">
änderbar
</div>
<svg id="S"> <!-- width & height sollen dynamisch, aus div #T -->
</svg> <!-- gesetzt werden und dann eine "line" -->
<script> // von links unten nach rechts oben
r = (T = document.getElementById('T')).getBoundingClientRect();
S.setAttribute('width',r.width); S.setAttribute('height',r.height);
S
.innerHTML = "<line x1 = " + r.x
+" y1 = " +1*(r.y+r.height-1)
+" x2 = " +1*(r.x+r. width-1)
+" y2 = " +1*(r.y+r.height-1)
+" stroke = 'black'"
+"/>";
console.log(T); // diese Anzeigen sind die er-
console.log(S); console.log(S.innerHTML);// warteten aber die."line"
</script> <!-- nicht zu sehen .
</body></html>
@@mathefritz
Die Frage „Was willst du uns damit sagen?“ würde wohl schon zu weit gehen. Deshalb die Frage: Willst du uns etwas sagen?
LLAP 🖖
Danke Gunnar Meine FRAGE ist ob und ggf wie, svg Elemente mit js änderbar sind, UND die Änderung auch sichtbar wird .
@@mathefritz
Meine FRAGE ist ob und ggf wie, svg Elemente mit js änderbar sind, UND die Änderung auch sichtbar wird .
Ja, SVG-Elemente sind mit JavaScript änderbar. Und ja, die Änderungen sind dann auch sichtbar.
LLAP 🖖
Danke; dann besteht ja Hoffnung; wo liegt denn der Fehler in meinem Versuch?
@@mathefritz
wo liegt denn der Fehler in meinem Versuch?
Wo liegt denn dein Versuch zum Ansehen?
LLAP 🖖
hm, meinte, das schon am Beginn gepostet zu habe. Einen Fehler fand ich, es fehlten noch die x,y für' svg,half aber nicht.
<!DOCTYPE html><html lang="de"> <meta charset="utf-8">
<body contenteditable><!--==================================================================-->
xxxxx
<div id = 'T' contenteditable
style="border: 1px solid black; display:inline-block;">
änderbar
</div>
<svg id="S"> <!-- width & height sollen dynamisch, aus div #T -->
</svg> <!-- gesetzt werden und dann eine "line" -->
<script> // von links unten nach rechts oben
r = (T = document.getElementById('T')).getBoundingClientRect();
S.setAttribute('width',r.width); S.setAttribute('height',r.height);
S.setAttribute( 'x',r.x) ; S.setAttribute( 'y',r.y);
S
.innerHTML = "<line x1 = " + r.x
+" y1 = " +1*(r.y+r.height-1)
+" x2 = " +1*(r.x+r. width-1)
+" y2 = " +1*(r.y+r.height-1)
+" stroke = 'black'"
+"/>";
console.log(T); // diese Anzeigen sind die er-
console.log(S); console.log(S.innerHTML);// warteten aber die."line"
</script> <!-- nicht zu sehen .
</body></html>
Edit: so, die Richigstellung y2 in "<line ..." auf r.y brachte es auch nicht
Hallo mathefritz,
einfach mal vergleichen, welchen Bereich das svg-Element via width / height erhält und wo die Koordinaten des line-Elements liegen.
Nur mal zum Testen, damit sehe ich etwas von der Linie:
S.setAttribute('width', r.x + r.width + 10);
S.setAttribute('height', r.y + r.height + 10);
<svg id="S" width="75.96665954589844" height="173.5">
<line x1="8" y1="162.5" x2="64.96665954589844" y2="162.5" stroke="black"></line>
</svg>
Grüße,
Thomas
Danke Thomas, aber worauf ist denn da noch Verlass? Für width ist man eigentlich auf BoundingClientRect angewiesen.
Hallo mathefritz,
Danke Thomas, aber worauf ist denn da noch Verlass? Für width ist man eigentlich auf BoundingClientRect angewiesen.
Naja, man kann halt schlecht in einen unsichtbaren Bereich zeichnen. Baue die Koordinaten der Linie und ggf. die viewBox des svg-Elements entsprechend um.
Worum es letztlich geht, habe ich aber auch nicht verstanden.
Grüße,
Thomas
Hallo mathefritz,
das Grundproblem ist, dass getBoundingClientRect die Position des Rechtecks (also x und y) in Bezug auf den Viewport zurückgibt. Das ist eine recht tückische Angelegenheit, denn wenn Du den Viewport scrollst, verändert sich die Rückgabe.
Um das zu lösen, musst Du das ermittelte BoundingRect verschieben (x und y manipulieren), basierend auf der Position des SVG.
Und dann musst Du Dich noch auf das input Event von div#T registrieren, damit jede Änderung den Repaint des SCG auslöst.
Abär, wieso eigentliesch? Kannst Du uns bitte mal das Problem beschreiben, das Du mit dieser SVG Akrobatik lösen willst? Erfinde nicht neu, was der Browser von allein kann. Möchtest Du einfach einen Strich unter das div#T zeichnen? Das ginge einfacher mit border-bottom...
Rolf
@@mathefritz
hm, meinte, das schon am Beginn gepostet zu habe.
Wenn „das“ für hingerotzten Quelltext steht, ja.
Wenn „das“ für eine Problembeschreibung steht, nein.
Was erwartest du? Dass jemand den Quelltext in eine Datei kopiert, um sich das ansehen zu können? Nein. Das ist deine Aufgabe.
Dass jemand aus dem, was dann zu sehen wäre, rätseln soll, was dein Problem ist? Nein.
LLAP 🖖
Das hier verursacht wohl das Problem:
S.innerHTML = "<line x1 = " + r.x
+" y1 = " +1*(r.y+r.height-1)
+" x2 = " +1*(r.x+r. width-1)
+" y2 = " +1*(r.y+r.height-1)
+" stroke = 'black'"
+"/>";
(Du sollst mit createElementNS() und dessen Schwestern arbeiten.)
Hallo Regina Schaukrug,
(Du sollst mit
createElementNS()und dessen Schwestern arbeiten.)
Nein, das ist nicht nötig und bei komplexerem Quelltext auch viel zu aufwändig. Meinen Test habe ich ebenfalls mit .innerHTML ausgeführt und auch hier klappt das mit SVG-Codefragmenten problemlos.
Grüße,
Thomas