Элемент <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
| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
path | Chrome Полная поддержка 1 | Edge Полная поддержка Да | 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 Полная поддержка Да | 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