`path-length` CSS property

Свойство path-length CSS задаёт общую длину контура в пользовательских единицах. Все вычисления, связанные с контуром, масштабируются с помощью отношения path-length / (вычисленное значение длины контура) — это относится к текстовым контурам, контурам анимации и различным операциям обводки.

Свойство path-length применяется только к элементам <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> и <rect>, вложенным в элемент <svg>.

Синтаксис

/* Keywords */
path-length: none;

/* <length> values */
path-length: 0;
path-length: 70;
path-length: 500;

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

Значения

none

Авторская длина контура не задана, поэтому для всех вычислений, связанных с контуром, используется собственная вычисленная длина контура пользовательского агента.

<length>

Неотрицательное безразмерное значение, задающее общую длину контура, определённую автором, в пользовательских единицах.

Формальное определение

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

path-length = 
  none |
  <length> [0,∞]

Примеры

Основное использование

В этом примере определяется контур и показано, как задать его длину с помощью CSS-свойства path-length.

SVG

В нашем SVG определён один изогнутый элемент <path> с цветной stroke. В нём также задан атрибут stroke-dasharray, который определяет регулярный пунктирный узор обводки.

<svg viewBox="0 0 600 200">
  <path
    d="M 30 100 C 150 20, 250 180, 380 100 S 520 20, 570 100"
    fill="none"
    stroke="#D85A30"
    stroke-width="4"
    stroke-dasharray="24 24"></path>
</svg>

CSS

Зададим значение path-length для <path>:

path {
  path-length: 500;
}

Результат

При задании большого значения path-length штрихи становятся меньше и располагаются чаще.

Анимация path-length

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

HTML и SVG

В этом примере используется тот же элемент SVG <path>, что и в предыдущем. Кроме того, добавлен элемент <input type="range">, который позволяет во время выполнения изменять значение path-length, применённое к <path>. Также добавлен элемент <output> для отображения текущего значения ползунка.

<div>
  <label for="path-slider">Adjust path-length</label>
  <input type="range" id="path-slider" min="0" max="800" value="200" />
  <output>200</output>
</div>

CSS

Для элемента :root зададим пользовательское свойство CSS с именем --path-length и начальным значением 200. Затем зададим для элемента <path> значение path-length, равное свойству --path-length, и применим к нему animation, которая выполняется бесконечное число раз, чередуя прямое и обратное направление.

:root {
  --path-length: 200;
}

path {
  path-length: var(--path-length);
  animation: path-length-anim 2s alternate infinite ease-in-out;
}

div {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
}

Затем определим блок @keyframes для анимации: он анимирует свойство path-length от значения --path-length до значения --path-length, умноженного на 1.5.

@keyframes path-length-anim {
  from {
    path-length: var(--path-length);
  }

  to {
    path-length: calc(var(--path-length) * 1.5);
  }
}

JavaScript

Сначала в скрипте получим ссылки на элементы <input type="range">, <output> и :root.

const slider = document.querySelector("input");
const output = document.querySelector("output");
const rootElem = document.querySelector(":root");

Затем добавим обработчик события input для ползунка, чтобы при изменении его значения значение textContent элемента <output> и значение пользовательского свойства --path-length устанавливались равными новому значению ползунка.

slider.addEventListener("input", () => {
  output.textContent = slider.value;
  rootElem.style.setProperty("--path-length", slider.value);
});

Результат

Передвигайте ползунок и обратите внимание: чем больше значение, тем меньше размер штриха.

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

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

См. также

• Атрибут SVG pathLength