<path>

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

html,body,svg { height:100% }

<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: Этот атрибут определяет форму.
Тип значения: <string> ; Значеие по умолчанию: ''; Анимирование: Да
pathLength: Этот атрибут позволяет указывать общую длину в пользовательских единицах.
Тип значения: <number> ; Значеие по умолчанию:нет; Анимирование: Да

Глобальные атрибуты

Атрибуты ядра: Most notably: id, tabindex
Атрибуты стиля: class, style
Атрибуты условной обработки: Most notably: requiredExtensions, systemLanguage
Атрибуты событий: Атрибуты глобальных событий, Атрибуты графических событий
Presentation Attributes: Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
ARIA атрибуты: aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

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

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

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

Характеристики	Статус	Коммент
SVG Paths Определение '<path>' в этой спецификации.	Рабочий черновик
Scalable Vector Graphics (SVG) 2 Определение '<path>' в этой спецификации.	Кандидат в рекомендации
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Определение '<path>' в этой спецификации.	Рекомендация	Initial definition

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

div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, перейдите на https://github.com/mdn/browser-compat-data и отправьте pull request на изменение.

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`path`	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1.5	IE Полная поддержка 9	Opera Полная поддержка 8	Safari Полная поддержка 3	WebView Android Полная поддержка 3	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка Да
`d`	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1.5	IE Полная поддержка 9	Opera Полная поддержка 8	Safari Полная поддержка 3	WebView Android Полная поддержка 3	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка: Полная поддержка

Смотрите также

SVG basic shapes: <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>
The MDN SVG "Getting Started" tutorial : Path

Последнее изменение: Sep 30, 2019, помощниками MDN