Знакомство с SVG / Рисуем прямоугольник [2/15]
×

Рисуем прямоугольник [2/15]

В SVG есть несколько способов нарисовать фигуру, для простых фигур есть свои теги.

Например, прямоугольник рисуется с помощью тега rect. Код простого прямоугольника выглядит так:

<rect width="150" height="100"/>

​Обратите внимание: все теги в SVG должны быть закрыты, то есть должно быть так: <rect .../> или так: <rect ...></rect>. Мы будем использовать первый способ.

Результат:

Атрибуты width и height управляют, соответственно, шириной и высотой фигуры. Значения можно задавать и в пикселях, и в процентах.

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

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


Выполнить задание
HTML
<svg> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Нарисуйте прямоугольник шириной 50%и высотой 100.
  2. Добавьте ему оранжевую заливку (fill="orange").
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.