Перейти к содержанию

offset-path

Свойство offset-path задает путь движения элемента и определяет положение элемента в родительском контейнере или системе координат SVG.

Демо

Пути перемещения

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* Default */
offset-path: none;

/* Function values */
offset-path: ray(45deg closest-side contain);

/* URL */
offset-path: url(#path);

/* Shapes */
offset-path: circle(50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(
    30% 0%,
    70% 0%,
    100% 50%,
    30% 100%,
    0% 70%,
    0% 30%
);
offset-path: path(
    'M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200'
);

/* Geometry Boxes */
offset-path: margin-box;
offset-path: stroke-box;

/* Global values */
offset-path: inherit;
offset-path: initial;
offset-path: revert;
offset-path: unset;

Значения

ray()

Принимая до трех значений, определяет путь, представляющий собой сегмент линии, начинающийся с позиции блока и продолжающийся в направлении, определяемом указанным углом, аналогичным углу градиента CSS, где 0deg вверх, с положительными углами, увеличивающимися по часовой стрелке, при этом значение размера аналогично значениям размера радиального градиента CSS от closest-side к farthest-corner, а ключевое слово contain.

url()

Ссылается на идентификатор фигуры SVG — circle, ellipse, line, path, polygon, polyline или rect — используя геометрию фигуры в качестве пути.

<basic-shape>

Указывает фигуру CSS, включая circle(), ellipse(), inset(), polygon() или path(). path() - строка пути, определенная с помощью синтаксиса координат SVG.

none

Путь движения вообще не указывается.

Спецификация

Поддержка браузерами

Комментарии