Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
SVGPathElement: getTotalLength() Methode
DiegetTotalLength() Methode derSVGPathElement Schnittstelle gibt den vom Benutzeragenten berechneten Wert für die Gesamtlänge des Pfades in Benutzereinheiten zurück.
Syntax
js
getTotalLength()Parameter
Keine.
Rückgabewert
Eine Zahl, die die Gesamtlänge des Pfades in Benutzereinheiten angibt.
Beispiele
Ermitteln der Gesamtlänge eines<path>
In diesem Beispiel ermitteln wir die Gesamtlänge von zwei Pfaden: einer einfachen Linie und einer herzförmigen Linie.
html
<svg width="200" height="100"> <path fill="red" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> <path d="M 0,30 h100" stroke="black" /></svg><pre></pre>#log { height: 70px; overflow: scroll; padding: 0.5rem; border: 1px solid black;}const logElement = document.querySelector("#log");function log(text) { logElement.innerText = `${logElement.innerText}${text}\n`; logElement.scrollTop = logElement.scrollHeight;}js
const complexPath = document.getElementById("heart");const basicPath = document.getElementById("line");// Access the pathLength propertyconst complexPathLength = complexPath.getTotalLength();const basicPathLength = basicPath.getTotalLength();// The base value of the pathLength attributelog(`complexPathLength: ${complexPathLength}`);log(`basicPathLength: ${basicPathLength}`);Spezifikationen
| Specification |
|---|
| SVG Paths # __svg__SVGPathElement__getTotalLength |