Оформление SVG-фигур / Пунктирные линии, часть 2 [13/20]
×

Пунктирные линии, часть 2 [13/20]

Видом обводки круглой фигуры можно также управлять.

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

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

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

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

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

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

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

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