SVG-путь
Описание элемента <path>
Элемент SVG <path> определяет путь.
Пути используются для создания сложных фигур, состоящих из нескольких прямых или изогнутых линий. Сложные фигуры, состоящие только из прямых линий, можно создать с помощью полилиний. Полилинии и пути создают похожие фигуры. Однако для имитации кривых полилинии требуют более мелких прямых отрезков.
Создание сложных путей с помощью XML- или текстового редактора не рекомендуется, поскольку понимание принципов их работы помогает замечать и исправлять проблемы отображения в SVG-файлах.
Форма элемента пути задаётся одним параметром: d, который содержит другие команды и параметры, используемые этими командами. Список команд приведён ниже:
- M = moveto (перемещение)
- L = lineto (линия)
- H = horizontal lineto (горизонтальная линия)
- V = vertical lineto (вертикальная линия)
- C = curveto (кривая Безье)
- S = smooth curveto (гладкая кривая)
- Q = quadratic Bézier curve (квадратичная кривая Безье)
- T = smooth quadratic Bézier curveto (гладкая квадратичная кривая)
- A = elliptical Arc (эллиптическая дуга)
- Z = closepath (замыкание)
Все эти команды также можно выполнять с помощью строчных букв. Заглавные буквы означают абсолютное позиционирование фигуры, а строчные — относительное.
Пример элемента SVG <path>:
Пример элемента SVG <path>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="300" height="250">
<path d="M190 40 L115 240 L265 240 Z" />
Sorry, inline SVG is not supported by your browser..
</svg>
</body>
</html>Practice
Какие команды используются в свойстве 'd' пути SVG в HTML?