W3docs
ru
Войти

Свойство CSS offset-anchor

Use the offset-anchor CSS property for specifying the anchor point within the box. Read about property values and practice with examples.

Свойство offset-anchor определяет точку привязки блока вдоль пути смещения. Путь смещения считается либо геометрией базовой фигуры, которая не была стилизована, либо путем, состоящим из одного или нескольких подпутей. Точка привязки указывает точку блока, которая перемещается вдоль пути смещения.

warning

Это свойство смещения является экспериментальной технологией.

Начальное значениеauto
Применяется кТрансформируемым элементам.
НаследуетсяНет.
АнимируетсяДа.
ВерсияMotion Path Module Level 1
Синтаксис DOMobject.style.offsetAnchor = "right top";

Синтаксис

Синтаксис CSS offset-anchor

offset-anchor: auto | <position>;

Пример свойства offset-anchor:

Пример кода CSS offset-anchor

<!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>
Попробуйте сами »

Значения

ЗначениеОписание
autoЦентр блока.
<position><percentage> - Процентное значение для горизонтального смещения относительно ширины блока отступов. Процентное значение для вертикального смещения относительно высоты блока отступов. <length> - Значение длины задает смещение от верхнего левого угла блока отступов.
initialЗаставляет свойство использовать значение по умолчанию.
inheritНаследует свойство от родительского элемента.

Практика

Практика

Какова функциональность свойства offset-anchor в CSS согласно статье на w3docs.com?