Uncaught Type Error bei getTotalLength()

[Rolf B]

Hallo Matthias,

wenn Du mouseover auf dem SVG Element registrierst, muss es ja krachen, sobald die Maus nicht auf einem Geometrieelement ist. Das Event wird dann für das <svg> Element geworfen.

rect, circle, polyline, polygon und path sind SVGGeometryElement und erben von SVGGraphicsElement, aber <svg> erbt direkt von SVGGraphicsElement und kennt die Methode deshalb nicht.

document.addEventListener('DOMContentLoaded', function () {
  const svg = document.querySelector('svg'),
        result = document.getElementById('result');
	svg.addEventListener('mouseover', findPathLength);
	svg.addEventListener('click', findPathLength);

  function findPathLength(event) {
    const elem = event.target;
    if (elem && elem.getTotalLength) {
      const aidi = elem.id,
            length = elem.getTotalLength();

      result.textContent = 'Die Pfadlänge für die id "' + aidi + 
                           '" beträgt: ' + length + 
                           ' dimensionslose Einheiten.';
    } else {
      result.textContent = 'Bewege die Maus auf ein Geometrie-Element';
    }
  }
});

Ich habe das Beispiel gefixt. Kann man die Vorschau eigentlich höher machen? Die Textausgabe ist nur sichtbar wenn man scrollt.

Ob getPointAtLength hier sinnvoll ist, weiß nicht nicht. Zumindest sollte man dann noch eine Idee andeuten, warum man das tun sollte (Grafiktool: verschiebe Pfad 2 so, dass sein Anfangspunkt mit dem Endpunkt von Pfad 1 zusammenfällt). Man kann auch einen kleinen Punkt auf den Anfangspunkt und einen etwas größeren Kreis auf den Endpunkt malen (bzw. schieben).

Update: Hab ich auch mal eingebaut 😀

By The Way hat async bei inline-Scripten keinen Effekt (und würde bei einem externen Script eine race condition mit DOMContentLoaded erzeugen, guckst Du hier. Ich habe async entfernt.

Rolf