Karl-Heinz Osmer


Wissenswertes über Datenbanken und Webseiten


Scalable Vector Graphics mit Javascript

SVG für Dummies, HTML- und CSS- Kenntnisse vorausgesetzt


So zeichnet man Linien auf einer Webseite zwischen einer Grafik und zugehörigen Texten.


So sieht es aus:

Segelschiff

Segel eines Dreimasters:

Großsegel

Besansegel

Fock



Das Konzept

Über die Grafik (Boot) wird eine gleichgroße transparente Grafik gelegt mit kleinen HTML-Elementen (rote Quadrate), die die Startpunkte der Linie markieren.

Javascript holt sich jede Position und die Position des zugehörigen Textes aufgrund deren id und verbindet beide mit einer Linie.



Schritt 1:   Grafik mit den Startpunkten der Linien versehen

Die Grafik wird mit einen Container (position:relative) eng umschlossen, sodass jede Position der Grafik mit x- und y- Wert adressiert werden kann (position:absolute). Die linke obere Ecke (grün) ist x=0, y=0, die rechte untere Ecke (blau) x=100%, y=100%.

Mit etwas Übung kann man die Prozentzahl x nach rechts und y nach unten schätzen und dann nachbessern.

Segelschiff

Linien-Startpunkte:

Fock: x=20%, y=65%

Grosssegel: x=42%, y=50%

Besan: x=65%, y=50%

<style>
.anker {
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  background: #f00;
}
</style>

<div class=li style="position:relative; width:10em; height:10em; border:.1pt solid #ccc;">
  <img src="img/animiertes_segelboot.gif" style="width:100%;height:100%" alt="Segelschiff" />
  <div class=anker id=lo     style="left:0;  top:0;    background:#0f0;"></div>
  <div class=anker id=ru     style="right:0; bottom:0; background:#00f;"></div>
  <div class=anker id=fock   style="left:20%; top:65%"></div>
  <div class=anker id=gross  style="left:42%; top:50%"></div>
  <div class=anker id=besan  style="left:65%; top:50%"></div>
</div>


Schritt 2:   Grafik und Text auf einer Fläche präsentieren

Grafik und Text sind HTML-gerecht auf einer Fläche / in einem Container (position:relative) zu zeigen



Schritt 3:   Die gesamte Fläche mit einer transparenten SVG-Grafik überdecken

Die Fläche (rot umrandet), auf der die Linien gezeichnet werden, wird mit dem SVG-Tag definiert;

<svg style='position:absolute; left:0; width:100%; top:0; height:100%; border:2px solid #f00'>
<script>
linie( "fock2", "fock_x2",  "#0ff" );
linie( "gross2","gross_x2", "#0ff" );
linie( "besan2","besan_x2", "#0ff" );
</script>
</svg>

Die Javascript-Funktion linie sieht so aus:

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:" +farbe +"; stroke-width:2px;' />";
//console.log( line_command );
  document.write( line_command );
}

Hier nochmal das Ergebnis von oben aber mit markierten Flächen:

Segelschiff

Segel eines Dreimasters:

Großsegel
Als Großsegel (bzw. kurz nur Groß) wird jenes Segel bezeichnet, das am Großmast eines Segelschiffes beziehungsweise am Mast eines slupgetakelten Segelbootes oder einer Segelyacht gefahren wird.

Besansegel

Fock


Buchstabe g und weiterere Worte. Noch mehr worte, eigentlich ein ganzer Absatz mit Zeilenumbrüchen und so. letter b