nicht angemeldet
svg nicht generierbar ? (Neuzeichnung nach Änderung bleibt aus )
0 
Gunnar Bittersmann
0 0 0 0 0 0 
Rolf B
0 Gunnar Bittersmann
0 
JürgenB
0
svg nicht generierbar ? (Neuzeichnung nach Änderung bleibt aus )
<!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 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
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 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
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 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
-
-
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
--
sumpsi - posui - clusi
-
-
-
@@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 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
-
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
-