<path>

Базовый уровень Широко доступно *

Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в различных версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015 г.⁩.

* Поддержка некоторых частей этой функции может различаться.

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

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

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

Атрибуты

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

Интерфейс DOM

Этот элемент реализует интерфейс SVGPathElement.

Пример

<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>

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

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

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

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

См. также

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

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