Animated path
Veröffentlicht am
Path Länge herausfinden
In einigen Fällen ist es nur schwer möglich die Länge eines Pfades zu ermitteln. Wie im Beitrag 'stroke-dasharray / pattern' der Umfang eines Kreises mit den standart Formeln die in jeder Formelsamlung zu finden sind, kann es nötig sein die Länge eines komplexeren Pfades zu ermitteln. Javascript bietet hier eine Möglichkeit ohne großen Aufwand die Länge auszugeben.
Hier erst mal der Pfad
<svg height="150px" width="100%"><path d="m 38.354248,78.86857 c -18.475344,-0.0466 -1.978152,-14.35785 -1.978152,-28.86749 0,-14.50963 -16.497192,-28.821298 1.978152,-28.867487 15.396046,-0.03849 38.521105,14.414497 61.645852,28.867497 23.125,14.45315 46.24989,28.90628 61.64585,28.86748 18.47534,-0.0466 1.97815,-14.35785 1.97815,-28.86748 0,-14.50964 16.49719,-28.821305 -1.97815,-28.867495 C 146.24991,21.095095 123.12485,35.54809 100.0001,50.00109 76.875099,64.45424 53.750212,78.90737 38.354248,78.86857 Z" style="fill: none; stroke: lightgrey; stroke-width: 1px;" id="p1"></path><text id="t1" x="20" y="120"></text><svg>
Und hier das Script.
let objmsg = document.querySelector('#t1');objmsg.innerHTML = document.querySelector('#p1').getTotalLength();