<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.
#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.
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}`);
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4