offsetLeft, offsetTop eines fließenden Textabsatzes

[Linuchs]

Hallo Martin,

Wie sieht es aus, wenn du das mit der span-Bastelei für die anderen beiden Segel auch machst?

Habe ich gemacht. Beim Durchlaufen der Elemente und deren parents darf ich den offsetTop NUR DANN berücksichtigen, wenn der tagName != "SPAN" ist.

Klappt beim Firefox 101.0.1, ist aber so unlogisch, dass das bei anderen Browsern vermutlich nicht funktioniert.

function linie( id1, id2, farbe) {

  let obj_1 = document.getElementById(id1);
  let x1    = 0;
  let y1    = 0;
  while ( obj_1.style.position != "relative" && obj_1.tagName != "BODY" ) {
    x1  +=  obj_1.offsetLeft;     // x-Pixel addieren
    if( obj_1.tagName != "SPAN" ) {
      y1  +=  obj_1.offsetTop;      // y-Pixel addieren
    }
    console.log( "x1=[" +x1 +"] y1=[" +y1 +"]" );
    obj_1 = obj_1.parentElement;
  }

  let obj_2 = document.getElementById(id2);
  let x2    = 0;
  let y2    = 0;
  while ( obj_2.style.position != "relative" && obj_2.tagName != "BODY" ) {
    x2  +=  obj_2.offsetLeft;     // x-Pixel addieren
    if( obj_2.tagName != "SPAN" ) {
      y2  +=  obj_2.offsetTop;      // y-Pixel addieren
    }
    console.log( "x2=[" +x2 +"] y2=[" +y2 +"] tagName=[" +obj_2.tagName +"]" );
    obj_2 = obj_2.parentElement;
  }

  x2 -= 5;  // kleiner Abstand zw. line und Text
  let h2  = document.getElementById(id2).offsetHeight;  // height der Zielmarke
  y2 += h2/2;
  let line_command  = "<line x1='" +x1 +"px', y1='" +y1 +"px', x2='" +x2 +"px', y2='" +y2 +"px' style='stroke:#f00; stroke-width:2px; z-index:99' />";
//console.log( line_command );
  document.write( line_command );
}


var line_command  = "<svg style='position:absolute; left:0; width:100%; top:0; height:100%;'>";
//console.log( line_command );
document.write( line_command );

linie("gross",      "gross_x",      "#f00");
linie("besan",      "besan_x",      "#f00");
linie("fock",       "fock_x",       "#f00");

var line_command  = "</svg>";
document.write( line_command );