CSS offset-anchor Property
Example
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;
}
Try it Yourself »
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 |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| offset-anchor | 116 | 116 | 72 | 16 | 102 |
CSS Syntax
offset-anchor: auto|value|initial|inherit;
Property Values
| 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 |
Related Pages
SVG tutorial: SVG Path
CSS tutorial: CSS Animations
CSS reference: CSS offset property
CSS reference: CSS offset-distance property
CSS reference: CSS offset-path property
CSS reference: CSS offset-position property
CSS reference: CSS offset-rotate property