Оформление SVG-фигур / Обводки [5/20]
×

Обводки [5/20]

Обводки задаются с помощью нескольких атрибутов, причём цвет и толщина обводки задаются отдельно. Цвет задаётся атрибутом stroke:

<circle r="60" cx="150" cy="50%" fill="none" stroke="orange"></circle>

либо через CSS:

circle {
  stroke: orange;
}

Результат будет одинаковым, у фигуры появится обводка толщиной один пиксель:

Без классных наклеек и значков сейчас никуда. Заходите к нам в магазин.

Выполнить задание
HTML
<svg width="300" height="150"> <circle r="60" cx="75" cy="50%" fill="gold"></circle> <circle class="shape-stroke" r="60" cx="225" cy="50%"></circle> </svg>
CSS
svg { border: 1px solid #dddddd; } .shape-stroke { fill: lightseagreen; }
HTML Academy
  1. Задайте первой фигуре обводку атрибутом stroke="darkorange".
  2. Задайте второй фигуре обводку через CSS stroke: teal.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #18, который стартует 7 августа.

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

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

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

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