CSS offset-anchor Eigenschaft

Definition und Verwendung

offset-anchor Die Eigenschaft spezifiziert, dass das Element auf einem festgelegten offset-path Punkte auf der durch die Eigenschaft definierten Kurve.

Wenn offset-rotate Wenn die Eigenschaft das Element dreht, offset-anchor Der definierte Punkt der Eigenschaft wird auch zum Drehmittelpunkt.

Beispiel

Fixieren Sie den rechten Mittelpunkt des <img>-Elements auf der definierten Kurve:

img {
  offset-path: path('M 50 80 C 150 -20 250 180 350 80');
  offset-anchor: right center;
}

Versuchen Sie es selbst

CSS-Syntax

offset-anchor: auto|value|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Der Anker befindet sich in der Mitte des Elements, was dem Wert 50% 50% entspricht.
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 Wenn nur ein Schlüsselwort angegeben wird, ist der andere Wert "center".
xpos ypos

Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale Position.

Der obere linke Ecke ist 0 0.

Die Einheit kann Pixel (0px 0px) oder jede andere CSS-Einheit sein.

Wenn nur ein Wert angegeben wird, ist der andere Wert 50%.

Es können % und Position gemischt werden.
x% y%

Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale Position.

Der obere linke Ecke ist 0% 0%. Die untere rechte Ecke ist 100% 100%.

Wenn nur ein Wert angegeben wird, ist der andere Wert 50%.

Der Standardwert ist: 50% 50%.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: auto
Vererbbarkeit: Nein
Animationserstellung: Unterstützt. Siehe:Eigenschaften zur Animation.
Version: CSS3
JavaScript-Syntax: object.style.offsetAnchor="bottom right"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Opera
116 116 72 16 102

Verwandte Seiten

Tutorium:SVG-Pfad

Tutorium:CSS-Animation

Bezug:CSS offset Eigenschaft

Bezug:CSS offset-distance Eigenschaft

Bezug:CSS offset-path Eigenschaft

Bezug:CSS offset-position Eigenschaft

Bezug:CSS offset-rotate Eigenschaft