The offset-anchor property defines the anchor point of a box along the offset path. An offset path is considered to be either a geometry of a basic shape that hasn’t been styled or a path consisted of one or more sub-paths. The anchor point specifies the point of the box which is the point that is moved along the offset path.
| Initial Value | auto |
| Applies to | Transformable elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | Motion Path Module Level 1 |
| DOM Syntax | object.style.offsetAnchor = "right top"; |
Syntax
offset-anchor: auto | <position>;Example of the offset-anchor property:
<!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");
}
@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>Values
| Value | Description |
|---|---|
| auto | Takes the value of offset-position provided that the offset position is not "auto" and offset-path is "none". |
| <position> |
<percentage>- A percentage for the horizontal offset is relative to the width of the content area. A percentage for the vertical offset is relative to the height of the content area. <length>- A length value gives a length offset from the upper left corner of the content area of a box. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |
Browser support
|
|
|
|
|
|---|---|---|---|---|
| 46.0+ | ✕ | ✕ | ✕ | 33.0+ |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.