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