<path>

Элемент <path> SVG является общим элементом для определения фигуры. Все основные фигуры могут быть созданы с помощью элемента path.

Пример

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z" />
</svg>

Атрибуты

d: Этот атрибут определяет форму пути. Тип значения: <строка>; Значение по умолчанию: ''; Анимируемо: да
pathLength: Этот атрибут позволяет авторам указать общую длину пути в пользовательских единицах. Тип значения: <число>; Значение по умолчанию: нет; Анимируемо: да

Контекст использования

Категории	Элемент графики, элемент фигуры
Разрешенное содержимое	Любое количество следующих элементов в любом порядке: Элементы анимации Дескриптивные элементы

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

Спецификация
Масштабируемые векторные графики (SVG) 2 # PathElement

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`path`	1	12	1.5	8	3	18	4	14	3	1.0	3
`d`	1	12	1.5	8	3	18	4	14	3	1.0	3
`fill`	1	79	1.5	15	3	18	4	14	3	1.0	4.4
`systemLanguage`	1	12	12	8	3	18	14	14	3	1.0	3

См. также

Основные фигуры SVG: <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>
Учебник MDN SVG "Начало работы": Путь

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