Antwort an „Linuchs“ verfassen

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 );
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen