path()

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

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

Попробуйте

Синтаксис

При использовании в offset-path или d:

path(<string>)

При использовании в clip-path:

path( [<fill-rule>,]? <string> )

Параметры

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

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

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

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

<string>

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

Значение возврата

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

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

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

<fill-rule> = 
  nonzero  |
  evenodd

Примеры

Примеры корректных значений для path()

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

Использование функции `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",
    },
  );
});

Изменение значения атрибута SVG контура d

Функция path() может использоваться для изменения значения атрибута SVG d атрибута, который также может быть установлен как 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>

Результат

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

Спецификация
CSS Shapes Module Level 1 # funcdef-basic-shape-path

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`path`	52	79	72	39	13.110.1	52	79	41	1310.3	6.0	52
`clip-path`	88	88	72	74	13.110.1	88	79	63	1310.3	15.0	88
`d`	52	79	97	60	Нет	52	97	51	Нет	6.0	52
`offset-path`	56	79	72	43	16	56	79	43	16	6.0	56
`shape-outside`	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/path