SVGPathElement: getPointAtLength() Methode

Die getPointAtLength() Methode des SVGPathElement Interfaces gibt den Punkt an einer gegebenen Entfernung entlang des Pfades zurück.

In diesem Artikel

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.

html
<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.

#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;
}

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.

js
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}`);

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden