Базовые фигуры SVG (rect, circle, line)

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

Опубликовано 04.04.2025
Просмотры 16
Автор
Рек. время прохождения 2 минуты
Упражнений 9
Комментарии 0
Тренажер HTML
В этом модуле мы погрузимся в мир SVG (Scalable Vector Graphics) — масштабируемой векторной графики. Это технология, которая позволяет описывать изображения с помощью кода, прямо в HTML. Главное преимущество векторной графики в том, что она идеально масштабируется без потери качества, что делает её незаменимой для иконок, логотипов и простых иллюстраций на сайтах. Мы не будем углубляться в сложную теорию, а сразу перейдем к практике. В этих заданиях вы научитесь создавать 'холст' для рисования и размещать на нем базовые фигуры: прямоугольники, круги и линии. Вы попрактикуетесь в использовании атрибутов для задания размеров, положения и цвета, постепенно собирая из простых элементов более сложные композиции. Это основа, без которой невозможно двигаться дальше в изучении SVG.
Список тем

Создание SVG контейнера

id: 37913_svg-task-1-container

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

CSS
svg {
  border: 1px solid black;
}
HTML
<input1 width="300" height="200">

</input1>
Чтобы определить область для SVG-графики, используется тег `<svg>`. Он является парным, поэтому ему нужен как открывающий, так и закрывающий тег. В данном задании вам нужно вписать имя тега.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Рисуем прямоугольник

id: 37913_svg-task-2-rect

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

CSS
svg {
  border: 1px solid black;
}
HTML
<svg width="300" height="200">
  <input1 x="20" y="20" width="100" height="50" fill="orange" />
</svg>
Для создания прямоугольников в SVG используется тег `<rect>`. Он является самозакрывающимся, поэтому ему не нужен парный закрывающий тег. Просто укажите имя тега в нужном месте.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Позиционирование и размер круга

id: 37913_svg-task-3-circle-attrs

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

CSS
svg {
  border: 1px solid black;
}
HTML
<svg width="300" height="200">
  <circle input1="150" input2="100" input3="40" fill="blue" />
</svg>
Для круга используются три ключевых атрибута: `cx` (координата X центра), `cy` (координата Y центра) и `r` (радиус). Расставьте их в правильные места.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Простая линия

id: 37913_svg-task-4-line

Кроме замкнутых фигур, SVG позволяет рисовать и простые линии. Создайте элемент, который нарисует черную диагональную линию на холсте.

CSS
svg {
  border: 1px solid black;
}
HTML
<svg width="300" height="200">
  <input1 x1="10" y1="10" x2="200" y2="150" stroke="black" stroke-width="2" />
</svg>
Для рисования линий предназначен тег `<line>`. Как и `<rect>`, он является самозакрывающимся.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Обводка и заливка

id: 37913_svg-task-5-fill-stroke

Любую фигуру можно настроить, задав ей цвет заливки и цвет обводки. Сделайте так, чтобы у прямоугольника была зеленая заливка и фиолетовая обводка.

CSS
svg {
  border: 1px solid black;
}
HTML
<svg width="300" height="200">
  <rect x="50" y="50" width="150" height="80" input1="green" input2="purple" stroke-width="4" />
</svg>
За цвет внутренней части фигуры отвечает атрибут `fill`. За цвет контура (обводки) — атрибут `stroke`. Вам нужно вписать названия этих атрибутов.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Толщина линии

id: 37913_svg-task-6-stroke-width

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

CSS
svg {
  border: 1px solid black;
}
HTML
<svg width="300" height="200">
  <line x1="20" y1="180" x2="280" y2="20" stroke="red" input1="10" />
</svg>
Чтобы задать толщину обводки или линии, используется атрибут `stroke-width`. Его значением является число (без единиц измерения).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Прямоугольник со скругленными углами

id: 37913_svg-task-7-rounded-rect

Стандартный прямоугольник имеет острые углы, но в SVG их можно легко скруглить. Добавьте атрибуты, чтобы у желтого прямоугольника появились скругленные углы.

CSS
svg {
  border: 1px solid black;
}
HTML
<svg width="300" height="200">
  <rect x="30" y="30" width="240" height="140" fill="yellow" stroke="black" stroke-width="2" input1="20" input2="20" />
</svg>
Для скругления углов у элемента `<rect>` используются атрибуты `rx` (радиус скругления по оси X) и `ry` (радиус скругления по оси Y). Если указать только один из них, второй примет то же значение.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Собираем простую композицию

id: 37913_svg-task-8-composition

Давайте объединим полученные знания и нарисуем простую сценку: красный 'мяч' лежит на зеленой 'земле'. Вам нужно правильно расставить теги фигур в коде.

CSS
svg {
  border: 1px solid black;
}
HTML
<svg width="300" height="200">
  <!-- Земля -->
  <input1 x="0" y="150" width="300" height="50" fill="green" />

  <!-- Мяч -->
  <input2 cx="150" cy="120" r="30" fill="red" stroke="black" stroke-width="2" />
</svg>
Вспомните, какой тег используется для создания прямоугольников (`<rect>`) и какой — для кругов (`<circle>`). Расставьте их в соответствующие места, чтобы создать нужную композицию.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Иконка 'Сообщение'

id: 37913_svg-task-9-icon

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

CSS
svg {
  border: 1px solid #ccc;
  border-radius: 8px;
}
HTML
<svg width="250" height="150" viewBox="0 0 250 150">
  <!-- Основа конверта -->
  <input1 x="20" y="30" width="210" height="100" fill="#FFF" input2="black" stroke-width="3" rx="10" ry="10" />

  <!-- Линии сгиба -->
  <input3 x1="22" y1="32" x2="125" y2="95" stroke="black" stroke-width="3" />
  <line x1="228" y1="32" x2="125" y2="95" stroke="black" stroke-width="3" />
</svg>
Внешняя часть конверта — это прямоугольник (`<rect>`). Линии сгиба можно нарисовать с помощью тега `<line>`. Цвет обводки задается атрибутом `stroke`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру