CSS offset-anchor-Eigenschaft
Mit der CSS-Eigenschaft offset-anchor den Ankerpunkt im Element festlegen. Werte und Beispiele auf w3docs.com erkunden.
Die CSS-Eigenschaft offset-anchor legt fest, welcher Punkt eines Elements am Offset-Pfad befestigt wird, wenn das Element sich entlang dieses Pfades bewegt. Anders ausgedrückt beantwortet sie die Frage: „Wenn sich die Box entlang des Pfades bewegt – welcher Punkt der Box folgt ihm: der Mittelpunkt, eine Ecke oder ein anderer Punkt?"
Wenn Sie ein Element mit offset-distance entlang eines Pfades animieren, benötigt der Browser einen Referenzpunkt auf der Box, der auf der Linie bleibt. Standardmäßig ist das der Mittelpunkt der Box, aber mit offset-anchor können Sie diesen Punkt verschieben. Dies ist das pfadbewegungsbezogene Gegenstück zu transform-origin: Statt des Drehpunkts für Rotationen und Skalierungen wählen Sie den Punkt, der dem Pfad folgt.
Warum offset-anchor wichtig ist
Ohne offset-anchor wird ein Element, das einem Pfad folgt, auf der Linie zentriert, sodass je eine Hälfte zu jeder Seite übersteht. Durch Ändern des Ankerpunkts können Sie:
- Die obere linke Ecke den Pfad verfolgen lassen (
offset-anchor: 0 0), nützlich wenn der Pfad die führende Kante eines Objekts darstellt. - Eine Beschriftung oder Markierungsspitze exakt auf der Kurve halten, während der Rest der Box seitlich herausragt.
- Die Ausrichtung eines Icons (z. B. Räder eines Autos, Spitze eines Pfeils, Stecknadel-Pin) feinjustieren, sodass es natürlich auf dem Pfad sitzt.
Dies hat nur dann einen sichtbaren Effekt, wenn das Element tatsächlich auf einem Offset-Pfad platziert ist – setzen Sie zuerst offset-path und animieren Sie dann offset-distance. offset-anchor ist Teil der Kurzschreibweise offset.
offset-anchor ist Teil des experimentellen CSS Motion Path-Moduls. Die Unterstützung in modernen Browsern ist weit verbreitet, aber prüfen Sie die aktuelle Kompatibilität und stellen Sie einen sinnvollen Fallback bereit (das Element wird einfach in seiner normalen Flussposition gerendert, wenn die Funktion nicht unterstützt wird).
| Anfangswert | auto |
|---|---|
| Gilt für | Transformierbare Elemente. |
| Vererbt | Nein. |
| Animierbar | Ja. |
| Version | Motion Path Module Level 1 |
| DOM-Syntax | object.style.offsetAnchor = "right top"; |
Syntax
CSS offset-anchor-Syntax
offset-anchor: auto | <position>;Beispiel der offset-anchor-Eigenschaft:
CSS offset-anchor-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
padding: 0 50px;
width: 100%;
}
svg,
.box {
position: absolute;
}
.box {
animation: move 3s 0ms infinite alternate ease-in-out;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
height: 50px;
width: 50px;
offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
offset-anchor: center;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-anchor property example</h2>
<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
<path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
</svg>
<div class="box"></div>
</body>
</html>In diesem Beispiel folgt die grün-blaue .box derselben Kurve, die die <svg>-Spur zeichnet. Mit offset-anchor: center (das Standardverhalten von auto) bleibt die Mitte der Box auf der Linie. Ändern Sie es zu 0 0 oder right bottom, um zu sehen, wie ein anderer Punkt der Box dem Pfad folgt.
Werte
offset-anchor akzeptiert das Schlüsselwort auto oder einen beliebigen CSS-<position>-Wert – denselben Wertetyp, den Sie für background-position verwenden würden.
| Wert | Beschreibung |
|---|---|
auto | Der Mittelpunkt der Box. |
<position> | <percentage> - Ein Prozentwert für den horizontalen Versatz ist relativ zur Breite der Padding-Box. Ein Prozentwert für den vertikalen Versatz ist relativ zur Höhe der Padding-Box. <length> - Ein Längenwert gibt einen Versatz von der oberen linken Ecke der Padding-Box an. |
initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Wenn offset-anchor: auto verwendet wird, übernimmt der Ankerpunkt den Wert von offset-position (der selbst standardmäßig den Boxmittelpunkt verwendet), sodass die Box auf dem Pfad zentriert bleibt.
Verwandte Eigenschaften
offset-anchor ist ein Teil des CSS Motion Path-Toolkits. Sie werden es in der Regel kombinieren mit:
offset-path— definiert die Linie oder Form, entlang derer sich das Element bewegt.offset-distance— wie weit entlang des Pfades das Element platziert wird (animieren Sie diesen Wert, um es zu bewegen).offset-position— der Startpunkt, der verwendet wird, wennoffset-pathnoneist oder wenn der Ankerautoist.offset-rotate— ob sich das Element dreht, um in die Bewegungsrichtung zu zeigen.offset— die Kurzschreibweise, die alle oben genannten Eigenschaften auf einmal setzt.