Знакомство с SVG / Рисуем окружность [8/15]
×

Рисуем окружность [8/15]

Окружность рисуется с помощью тега circle. Пример кода:

<circle r="50"/>

Атрибут r — радиус окружности.

В отличие от предыдущих фигур, положение окружности в пространстве определяется координатами центра фигуры: атрибут cx задаёт положение по горизонтальной оси, cy — по вертикальной.

По умолчанию координаты центра окружности равны 0,0, поэтому она находится в верхнем левом углу. Подвинем фигуру:

<circle r="50" cx="100" cy="50%"/>

Значения можно задавать как в пикселях, так и в процентах. Процентные значения рассчитываются относительно размеров SVG-элемента.

Радиус и координаты можно задавать только атрибутами, с помощью CSS это сделать нельзя.


Выполнить задание
HTML
<svg> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Нарисуйте окружность с радиусом 10 и центром по горизонтали (cx) равным 50, по вертикали (cy) — 50%, цвет заливки — crimson.
  2. Вторую окружность: радиус — 30, cx = 105, cy = 50%, цвет заливки — orangered.
  3. Третью: радиус — 50, cx = 200 и cy = 50%, цвет заливки — gold.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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