SVGPathElement: getPointAtLength() Methode
Die getPointAtLength() Methode des SVGPathElement Interfaces gibt den Punkt an einer gegebenen Entfernung entlang des Pfades zurück.
Syntax
getPointAtLength(distance)
Parameter
distance-
Eine Zahl, die die Entfernung entlang des Pfades angibt
Rückgabewert
Ein DOMPoint, der den Punkt an einer gegebenen Entfernung entlang des Pfades angibt.
Beispiele
Den Mittelpunkt eines <path> ermitteln
In diesem Beispiel bestimmen wir den Mittelpunkt eines Pfades, indem wir den Punkt ermitteln, der sich auf halber Länge des Pfades befindet.
Wir definieren ein SVG, das zwei Pfade enthält: eine einfache Linie und eine komplexe Herzform.
Der Pfad, der das Herz erzeugt, ist ungefähr 275 Einheiten lang.
<svg width="200" height="100">
<path
id="heart"
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 id="line" d="M 0,30 h100" stroke="black" />
</svg>
Die Linie ist horizontal, beginnt bei 0, 30 und ist 100 Einheiten lang.
Der Pfad des Herzens beginnt bei 10, 30 und ist ungefähr 275 Einheiten lang.
Wir wissen, dass die Länge der Linie 100 Einheiten beträgt, und daher 50 der Mittelpunkt ist.
Wir verwenden die SVGPathElement.getTotalLength() Methode, um die Länge des Herzpfades zu erhalten und teilen sie durch 2, um den Abstand zum Mittelpunkt zu ermitteln.
Dann verwenden wir die getPointAtLength() Methode, um den Mittelpunkt als DOMPoint zurückzugeben.
Wir zeigen die x- und y-Koordinaten für jeden Mittelpunkt an.
const basicPath = document.getElementById("line");
const complexPath = document.getElementById("heart");
// Get the length of the heart and divide by 2
const halfLength = complexPath.getTotalLength() / 2;
// Access the getPointAtLength property
const basicMidPoint = basicPath.getPointAtLength(50);
const complexMidPoint = complexPath.getPointAtLength(halfLength);
// The base value of the pathLength attribute
log(`Line mid point: ${basicMidPoint.x}, ${basicMidPoint.y}`);
log(`Heart mid point: ${complexMidPoint.x}, ${complexMidPoint.y}`);
Spezifikationen
| Specification |
|---|
| SVG Paths # __svg__SVGPathElement__getPointAtLength |