CSS-функция `path()`

path() CSS функция принимает строку с SVG-путём и используется в модулях CSS-фигур и CSS-траекторий движения, чтобы создавать фигуры. Функция path() — это значение типа данных <basic-shape>. Её можно использовать в свойствах CSS offset-path и clip-path, а также в атрибуте SVG d.

Использование функции path() имеет некоторые ограничения. Путь должен быть задан в виде одной строки, поэтому создать пользовательский путь с помощью переменных (функций var()) нельзя. Кроме того, все длины в пути неявно задаются в пикселях (pixel) (единицах px); использовать другие единицы нельзя. Функция shape() предоставляет больше возможностей, чем функция path().

Попробуйте

clip-path: path(
  "M  20  240 \
 L  20  80 L 160  80 \
 L 160  20 L 280 100 \
 L 160 180 L 160 120 \
 L  60 120 L  60 240 Z"
);

clip-path: path(
  "M 20 240 \
 C 20 0 300 0 300 240 Z"
);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Синтаксис

path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")

/* When used in clip-path only */
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")

Параметры

<fill-rule> Необязательный

Определяет, какие части пути находятся внутри фигуры. Возможные значения:

• nonzero: точка считается находящейся внутри фигуры, если луч, проведённый из этой точки, пересекает больше сегментов пути слева направо, чем справа налево, в результате чего получается ненулевое значение. Это значение используется по умолчанию, если <fill-rule> не задан.

• evenodd: точка считается находящейся внутри фигуры, если луч, проведённый из этой точки, пересекает нечётное количество сегментов пути. Это означает, что каждый раз, когда луч входит в фигуру, он не выходит из неё такое же количество раз, то есть число входов без соответствующих выходов нечётное.

Предупреждение: <fill-rule> не поддерживается в свойстве offset-path, и его использование делает свойство недействительным.

<string>

Строка данных data в кавычках, определяющая SVG-путь. Строка данных SVG-пути содержит команды пути, в которых неявно используются пиксельные единицы. Пустой путь считается недействительным.

Возвращаемое значение

Возвращает значение <basic-shape>.

Формальный синтаксис

<path()> = 
  path( <'fill-rule'>? , <string> )

Примеры

Использование функции path() в качестве значения offset-path

В следующем примере функция path() задана в качестве значения свойства offset-path, чтобы создать эллиптическую траекторию, по которой будет двигаться мяч.

<div id="path">
  <div id="ball"></div>
</div>
<button>animate</button>

#path {
  margin: 40px;
  width: 400px;
  height: 200px;

  /* draw the gray ramp */
  background: radial-gradient(at 50% 0%, transparent 70%, grey 70%, grey 100%);
}

#ball {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;

  /* mark the elliptical path */
  offset-path: path("M 15 15 A 6 5.5 10 0 0 385 15");
}

const btn = document.querySelector("button");
const ball = document.getElementById("ball");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", true);
  setTimeout(() => btn.removeAttribute("disabled"), 6000);

  ball.animate(
    // animate the offset path
    { offsetDistance: [0, "100%"] },
    {
      duration: 1500,
      iterations: 4,
      easing: "cubic-bezier(.667,0.01,.333,.99)",
      direction: "alternate",
    },
  );
});

Изменение значения атрибута d SVG-пути

С помощью path() можно изменить значение атрибута d SVG, которому также можно присвоить значение none в CSS.

Символ «V» будет переворачиваться по вертикали при наведении курсора, если d поддерживается в качестве свойства CSS.

CSS

html,
body,
svg {
  height: 100%;
}

/* This path is displayed on hover */
#svg_css_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}

HTML

<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>

Результат

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

Совместимость с браузерами

См. также

• border-shape, shape-outside
• Модуль CSS-фигур
• Обзор CSS-фигур
• Синтаксис path SVG: иллюстрированное руководство на CSS-tricks (2021)