CSS-свойство `d`

Свойство d CSS задаёт путь, который должен быть нарисован элементом SVG <path>. Если оно задано, то переопределяет атрибут d элемента.

Синтаксис

/* Default */
d: none;

/* Basic usage */
d: path("m 5,5 h 35 L 20,30 z");
d: path("M 0,25 l 50,150 l 200,50 z");
d: path("M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z");

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

Значения

Значением может быть функция path() с одним параметром типа <string> или ключевое слово none:

none

Путь не рисуется.

path(<string>)

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

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

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

d = 
  none |
  path(<string>)

Примеры

Задание данных пути

В этом примере показан базовый вариант использования d и то, как CSS-свойство d имеет приоритет над атрибутом d.

HTML

Мы добавляем в SVG два идентичных элемента <path>; значения их атрибутов d — "m 5,5 h 90 v 90 h -90 v -90 z", что создаёт квадрат 90px.

<svg>
  <path d="m 5,5 h 90 v 90 h -90 v -90 z" />
  <path d="m 5,5 h 90 v 90 h -90 v -90 z" />
</svg>

CSS

С помощью CSS мы задаём для обоих путей чёрную stroke и полупрозрачную красную fill. Затем используем свойство d, чтобы переопределить значение атрибута SVG d только для последнего пути. По умолчанию браузер отображает изображения SVG шириной 300px и высотой 150px.

svg {
  border: 1px solid;
}

path {
  fill: #ff333388;
  stroke: black;
}

path:last-of-type {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z"
  );
}

Результаты

Второй <path> — это сердце, заданное значением функции path() свойства CSS d. Путь неоформленного <path> остался квадратом, заданным значением его атрибута SVG d.

Анимация данных пути

В этом примере показана анимация значения атрибута d.

HTML

Мы создаём <svg>, содержащий один элемент <path>.

<svg>
  <path />
</svg>

CSS

С помощью атрибута d мы задаём сердце, перечёркнутое линией. В CSS мы задаём fill, stroke и stroke-width этого пути, а также добавляем двухсекундный transition. Мы добавляем стиль :hover с немного отличающейся функцией path(); в пути столько же точек данных, сколько и в состоянии по умолчанию, поэтому его можно анимировать.

svg {
  border: 1px solid;
}

path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M90,5 L5,90"
  );
  transition: all 2s;
  fill: none;
  stroke: red;
  stroke-width: 3px;
}

svg:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
  stroke: black;
}

Результаты

Чтобы посмотреть анимацию, наведите указатель на SVG.

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

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

См. также

• Атрибут SVG d
• fill
• stroke
• Функция path()
• Тип данных <basic-shape>
• Обзор CSS-фигур
• Модуль CSS-фигуры