Пути и сложные формы (path) [Модуль 12: SVG и Canvas]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

В этом модуле мы изучим один из самых мощных элементов в SVG — `<path>`. С его помощью можно нарисовать абсолютно любую фигуру, от простой прямой линии до сложных иллюстраций и иконок. Вся магия заключается в специальной строке с командами, которая передается в атрибут `d`. Это похоже на то, как вы бы давали инструкции художнику: 'начни здесь', 'проведи линию туда', 'нарисуй дугу'. В этих заданиях мы пошагово разберем основные команды для построения путей: научимся рисовать прямые и кривые линии, замыкать фигуры и стилизовать их. После прохождения этого тренажера вы сможете создавать собственные уникальные векторные изображения с помощью всего нескольких строк кода.

Список тем

Создание SVG пути

id: 37914_svg-path-1

Давайте начнем с основ. Чтобы нарисовать что-либо с помощью пути, нам нужен специальный тег внутри SVG. Ваша задача — вставить правильный тег, чтобы на экране появилась диагональная линия.

CSS

path {
  stroke: #4A90E2;
  stroke-width: 5;
  fill: none;
}

                     <svg viewBox="0 0 100 100">
  <input1 d="M 10 10 L 90 90" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <input1 d="M 10 10 L 90 90" />
</svg>

Для создания путей в SVG используется тег `<path>`. Вставьте его на место пропуска.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Атрибут для данных пути

id: 37914_svg-path-2

Теперь, когда у нас есть тег `<path>`, ему нужно передать инструкции для рисования. Для этого используется специальный атрибут, который содержит все команды и координаты. Добавьте недостающий атрибут, чтобы нарисовать треугольник.

CSS

path {
  stroke: #50E3C2;
  stroke-width: 4;
  fill: rgba(80, 227, 194, 0.3);
}

                     <svg viewBox="0 0 100 100">
  <path input1="M 50 15 L 85 85 L 15 85 Z" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <path input1="M 50 15 L 85 85 L 15 85 Z" />
</svg>

Данные пути (команды и координаты) передаются через атрибут `d` (от слова 'data'). Впишите `d` в нужное место.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Команды 'переместиться' и 'линия до'

id: 37914_svg-path-3

Путь строится с помощью последовательности команд. Чтобы нарисовать простую линию, сначала нужно 'переместить курсор' в начальную точку, а затем 'провести линию' до конечной. Заполните пропуски, используя правильные команды.

CSS

path {
  stroke: #E47C4A;
  stroke-width: 5;
  fill: none;
}

                     <svg viewBox="0 0 100 100">
  <path d="input1 20 80 input2 80 20" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <path d="input1 20 80 input2 80 20" />
</svg>

Используйте команду `M` (Move to) для перемещения в начальную точку и команду `L` (Line to) для проведения линии к следующей точке. Команды пишутся заглавными буквами.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Замыкание пути

id: 37914_svg-path-4

Мы нарисовали две стороны треугольника. Чтобы завершить фигуру, нужно соединить последнюю точку с первой. Для этого существует специальная команда, которая делает это автоматически. Добавьте её в конец строки.

CSS

path {
  stroke: #7ED321;
  stroke-width: 4;
  fill: rgba(126, 211, 33, 0.4);
}

                     <svg viewBox="0 0 100 100">
  <path d="M 50 15 L 85 85 L 15 85 input1" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <path d="M 50 15 L 85 85 L 15 85 input1" />
</svg>

Чтобы замкнуть путь (провести линию от текущей точки до начальной), используется команда `Z` (Close path). Она не требует координат.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Горизонтальные и вертикальные линии

id: 37914_svg-path-5

Когда нужно нарисовать строго горизонтальную или вертикальную линию, можно использовать более короткие команды вместо `L`. Заполните пропуски, чтобы достроить 'ступеньку', используя эти команды.

CSS

path {
  stroke: #BD10E0;
  stroke-width: 5;
  fill: none;
}

                     <svg viewBox="0 0 100 100">
  <path d="M 20 80 input1 80 input2 20" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <path d="M 20 80 input1 80 input2 20" />
</svg>

Используйте команду `H` (Horizontal lineto) для рисования горизонтальной линии (меняется только X-координата) и `V` (Vertical lineto) для вертикальной (меняется только Y).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Кривая Безье: квадратичная

id: 37914_svg-path-6

Прямые линии — это хорошо, но вся прелесть SVG в кривых! Давайте нарисуем простую дугу с помощью квадратичной кривой Безье. Ей нужны две точки: одна контрольная (которая 'притягивает' линию) и одна конечная. Вставьте правильную команду.

CSS

path {
  stroke: #F5A623;
  stroke-width: 5;
  fill: none;
}

                     <svg viewBox="0 0 100 100">
  <path d="M 10 50 input1 50 10, 90 50" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <path d="M 10 50 input1 50 10, 90 50" />
</svg>

Для создания квадратичной кривой Безье используется команда `Q`. После нее идут две пары координат: `Q x1 y1, x2 y2`, где (x1, y1) — контрольная точка, а (x2, y2) — конечная точка кривой.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Кривая Безье: кубическая

id: 37914_svg-path-7

Для более сложных и плавных изгибов используется кубическая кривая Безье. У нее уже две контрольные точки, что дает больше контроля над формой. Вставьте команду для создания S-образной кривой.

CSS

path {
  stroke: #4A90E2;
  stroke-width: 5;
  fill: none;
}

                     <svg viewBox="0 0 100 100">
  <path d="M 10 90 input1 25 10, 75 10, 90 20" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <path d="M 10 90 input1 25 10, 75 10, 90 20" />
</svg>

Кубическая кривая Безье задается командой `C`. Ей требуются три пары координат: две контрольные точки и одна конечная (`C x1 y1, x2 y2, x3 y3`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Рисование дуги

id: 37914_svg-path-8

Кроме кривых Безье, в SVG можно рисовать дуги эллипсов. Это идеально подходит для создания круговых диаграмм или закругленных форм. Вставьте команду, чтобы нарисовать дугу.

CSS

path {
  stroke: #D0021B;
  stroke-width: 5;
  fill: none;
}

                     <svg viewBox="0 0 100 100">
  <path d="M 20 80 input1 40 40 0 0 1 80 80" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <path d="M 20 80 input1 40 40 0 0 1 80 80" />
</svg>

Для рисования дуги эллипса используется команда `A`. У нее много параметров, но в данном случае нужно просто вставить саму команду на место пропуска.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Стилизация: заливка и обводка

id: 37914_svg-path-9

Фигуры можно раскрашивать. За это отвечают атрибуты заливки (внутреннего цвета) и обводки (цвета линии). Задайте нужные атрибуты, чтобы раскрасить треугольник.

CSS

/* В этом задании CSS не используется, вся стилизация в HTML */

                     <svg viewBox="0 0 100 100">
  <path d="M 50 15 L 85 85 L 15 85 Z" input1="#4A90E2" input2="#F5A623" stroke-width="4" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <path d="M 50 15 L 85 85 L 15 85 Z" input1="#4A90E2" input2="#F5A623" stroke-width="4" />
</svg>

Используйте атрибут `fill` для цвета заливки и `stroke` для цвета обводки. Значениями могут быть названия цветов (например, 'blue', 'red') или их HEX-коды.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Фигура без заливки

id: 37914_svg-path-10

Иногда нужно, чтобы у фигуры была только обводка, а внутри она была прозрачной. Для этого атрибуту заливки нужно задать специальное значение. Также давайте изменим толщину обводки. Заполните пропуски.

CSS

/* Вся стилизация в HTML */

                     <svg viewBox="0 0 100 100">
  <path d="M 10 80 L 30 20 L 50 80 L 70 20 L 90 80" stroke="#D0021B" fill="input1" input2="5" />
</svg>

HTML

<svg viewBox="0 0 100 100">
  <path d="M 10 80 L 30 20 L 50 80 L 70 20 L 90 80" stroke="#D0021B" fill="input1" input2="5" />
</svg>

Чтобы убрать заливку, используйте `fill="none"`. Для управления толщиной обводки используется атрибут `stroke-width`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку