SVG <путь>

SVG-путь — <путь>

Элемент <path> используется для определения пути.

Для данных пути доступны следующие команды:

• M = двигаться к
• L = линиято
• H = горизонтальная линия
• V = вертикальная линия
• C = кривая
• S = плавная кривая
• Q = квадратичная кривая Безье
• T = гладкая квадратичная кривая Безье
• A = эллиптическая дуга
• Z = близкий путь

Примечание. Все приведенные выше команды также могут быть выражены строчными буквами. Заглавные буквы означают абсолютное позиционирование, строчные — относительное позиционирование.

Пример 1

В приведенном ниже примере определяется путь, который начинается в позиции 150,0 со строкой до позиции 75,200, затем оттуда идет линия до 225,200 и, наконец, замыкается путь обратно до 150,0:

Вот SVG-код:

Пример 2

Кривые Безье используются для моделирования гладких кривых, которые можно масштабировать до бесконечности. Как правило, пользователь выбирает две конечные точки и одну или две контрольные точки. Кривая Безье с одной контрольной точкой называется квадратичной кривой Безье, а кривая с двумя контрольными точками называется кубической.

В следующем примере создается квадратичная кривая Безье, где A и C — начальная и конечная точки, B — контрольная точка:

Вот SVG-код:

Сложный? ДА!!!! Из-за сложности, связанной с рисованием контуров, настоятельно рекомендуется использовать редактор SVG для создания сложной графики.