d

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

Примечание: Свойство d применяется только к элементам <path>, вложенным в элемент <svg>. Оно не применяется к другим элементам SVG, а также к элементам HTML или псевдоэлементам.

Синтаксис

/* 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 содержит команды пути, которые неявно используют пиксельные единицы. Пустой путь считается недопустимым.

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

Начальное значение	`none`
Применяется к	элементу `<path>` в элементе `<svg>`
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	да, как указано для `<basic-shape>`, в противном случае нет

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

d = 
  none      |
  <string>

Примеры

Определение данных пути

Этот пример демонстрирует базовое использование d, и как свойство CSS d имеет приоритет над атрибутом d.

HTML

Мы включаем два одинаковых элемента <path> в SVG; значения их атрибута 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: #f338;
  stroke: #000;
}

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> представляет собой сердце, как определено в значении функции свойства CSS d path(). Путь нестилизованного элемента <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.

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

Спецификация
Scalable Vector Graphics (SVG) 2 # TheDProperty

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`d`	≤80	≤80	97	67	Нет Свойство анализируется, но не имеет эффекта.	80	97	57	Нет Свойство анализируется, но не имеет эффекта.	13.0	80

См. также

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

© 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/d