CSS offset-anchor Property

Fasten the right center point of an <img> element to the defined path:

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

Definition and Usage

The offset-anchor property specifies the point on an element to be fixed along a path defined by the offset-path property.

The point defined by the offset-anchor property will also be the center of rotation if the element is rotated with the offset-rotate property.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.offsetAnchor="bottom right" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
offset-anchor	116	116	72	16	102

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

Value	Description
auto	Default. The achored point will be in the center of the element, same as property value '50% 50%'.
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be "center"
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 50% 50%
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit