offset-path

Свойство offset-path принимает в качестве значения значение <offset-path>, значение <coord-box>, оба значения, или ключевое слово none. Значение <offset-path> является функцией ray(), значением <url> или значением <basic-shape>.

none

Указывает, что элемент не следует никакой траектории смещения. Значение none эквивалентно тому, что у элемента нет трансформации смещения offset transform. В этом случае движение элемента определяется его свойствами по умолчанию, такими как top и left, а не траекторией смещения. Это значение по умолчанию.

<offset-path>

Функция ray(), значение <url>, или значение <basic-shape>, которые задают геометрическую траекторию смещения. Если опущен, форма траектории для значения <coord-box> является inset(0 round X), где X — значение border-radius элемента, который определяет контейнер.

ray()

Определяет линию, начинающуюся в заданной позиции, заданной длины и направленную под заданным углом. Функция ray() принимает до четырёх параметров: <angle>, необязательное значение размера, необязательное ключевое слово contain, и необязательное at <position>.

<url>

Указывает идентификатор элемента фигуры SVG. Траекторией является форма SVG-элемента <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> или <rect>, который ссылается на свой id в функции url(). Если URL не ссылается на элемент фигуры или является некорректным, разрешённое значение для траектории смещения — path("M0,0") (которое является допустимым значением <basic-shape>).

<basic-shape>

Задаёт траекторию смещения как эквивалентную траекторию функции базовой формы CSS, такой как circle(), ellipse(), inset(), path(), polygon(), rect() или xywh(). Например, если <basic_shape> — функция ellipse(), то траекторией является контур эллипса, начинающийся в правой точке эллипса и проходящий по часовой стрелке на полный оборот. Для ellipse() и circle(), которые принимают параметр at <position>, если <position> опущен, позиция по умолчанию center, если у элемента не задано offset-position. В этом случае значение offset-position используется для параметра at <position>. Более сложные фигуры можно определить с помощью функции shape().

<coord-box>

Указывает размерную информацию ссылочной области, содержащей траекторию. Ссылочная область выводится из элемента, устанавливающего контейнер для этого элемента. Этот параметр необязателен. Если не указан, значение по умолчанию — border-box в контексте CSS. В контексте SVG значение интерпретируется как view-box. Если ray() или <basic-shape> используется для определения траектории смещения, значение <coord-box> предоставляет ссылочную область для луча или <basic-shape> соответственно. Если <url> используется для определения траектории смещения, значение <coord-box> предоставляет область просмотра и систему пользовательских координат для элемента фигуры, с началом (0 0) в верхнем левом углу и размером 1px.

Свойство offset-path определяет траекторию, по которой может перемещаться анимированный элемент. Траектория смещения — это заданная траектория с одним или несколькими подтраекториями или геометрия нестилизованной базовой фигуры. Точная позиция элемента на траектории смещения определяется свойством offset-distance. Каждая форма или траектория должна определять начальную позицию для вычисленного значения 0 для offset-distance и начальное направление, которое задаёт поворот объекта к начальной позиции.

В ранних версиях спецификации это свойство называлось motion-path. Оно было изменено на offset-path, потому что свойство описывает статические позиции, а не движение.

offset-path = 
  none                          |
  <offset-path> || <coord-box>  

<offset-path> = 
  <ray()>        |
  <url>          |
  <basic-shape>  

<coord-box> = 
  <paint-box>  |
  view-box     

<ray()> = 
  ray( <angle>          &&
  <ray-size>?           &&
  contain?              &&
  [ at <position> ]? )  

<url> = 
  <url()>  |
  <src()>  

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<ray-size> = 
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides            

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<length-percentage> = 
  <length>      |
  <percentage>  

Этот пример демонстрирует использование различных значений <coord-box> в свойстве offset-path.

.box {
  width: 40px;
  height: 20px;
  animation: move 8000ms infinite ease-in-out;
}

.blueBox {
  background-color: blue;
  offset-path: border-box;
  offset-distance: 5%;
}

.greenBox {
  background-color: green;
  offset-path: padding-box;
  offset-distance: 8%;
}

.redBox {
  background-color: red;
  offset-path: content-box;
  offset-distance: 12%;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

В этом примере отступы, границы и поля специально заданы большими значениями, чтобы продемонстрировать размещение синих, зелёных и красных прямоугольников на соответствующих <coord-box> границах: border-box, padding-box и content-box.

Результат

В этом примере элемент <svg> создаёт дом с трубой и также определяет две половины ножниц. Дом и труба состоят из прямоугольников и многоугольников, а половины ножниц представлены двумя отдельными элементами path. В CSS-коде свойство offset-path используется для указания траектории для следования двух половин ножниц. Эта CSS-траектория идентична траектории, представленной элементом <path> в SVG, которая является контуром дома, включая трубу.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="700"
  height="450"
  viewBox="350 0 1400 900">
  <title>House and Scissors</title>
  <rect x="595" y="423" width="610" height="377" fill="blue" />
  <polygon points="506,423 900,190 1294,423" fill="yellow" />
  <polygon points="993,245 993,190 1086,190 1086,300" fill="red" />
  <path
    id="house"
    d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
    fill="none"
    stroke="black"
    stroke-width="13"
    stroke-linejoin="round"
    stroke-linecap="round" />
  <path
    id="firstScissorHalf"
    class="scissorHalf"
    d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
    transform="translate(0,0)"
    fill="green"
    stroke="black"
    stroke-width="5"
    stroke-linejoin="round"
    stroke-linecap="round"
    fill-rule="evenodd" />
  <path
    id="secondScissorHalf"
    class="scissorHalf"
    d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
    transform="translate(0,0)"
    fill="forestgreen"
    stroke="black"
    stroke-width="5"
    stroke-linejoin="round"
    stroke-linecap="round"
    fill-rule="evenodd" />
</svg>

.scissorHalf {
  offset-path: path(
    "M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190"
  );
  animation: follow-path 4s linear infinite;
}

@keyframes follow-path {
  to {
    offset-distance: 100%;
  }
}

Результат

Без свойства offset-path две половины ножниц по умолчанию располагались бы в верхнем левом углу холста. Однако с использованием offset-path, две половины ножниц выравниваются с начальной точкой SVG-траектории, позволяя им перемещаться по ней.

Этот пример демонстрирует, как сослаться на SVG-фигуру для определения формы траектории, по которой может следовать элемент. Зелёный круг (определённый .target) следует по траектории прямоугольника, который определяется путем передачи идентификатора SVG-фигуры (svgRect) свойству offset-path с помощью url().

Прямоугольник SVG, определяющий форму траектории, показан здесь только для визуального подтверждения того, что зелёный круг действительно следует по траектории, заданной этим прямоугольником.

<div class="outer">
  <div class="target"></div>
</div>
  <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect id="svgRect" x="50" y="50" width="200" height="100" />
  </svg>
</div>

.target {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: green;
  offset-path: url(#svgRect);
  offset-anchor: auto;
  animation: move 5s linear infinite;
}

#svgRect {
  fill: antiquewhite;
  stroke: black;
  stroke-width: 2;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

• offset
• offset-distance
• offset-rotate
• SVG <path>
• path()
• Другие демонстрации:
  • Примеры с различными значениями фигур на Codepen от CSS-Tricks
  • Перемещение треугольника по криволинейной траектории на Codepen от Eric Willigers
  • Перемещение пары ножниц по форме дома на Codepen от Eric Willigers
  • Перемещение нескольких пар глаз на JSFiddle от Eric Willigers