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

Сдвиг обводки [19/20]

Пунктирной обводке с помощью свойства stroke-dashoffset можно задать сдвиг. Возьмём такой пример:

stroke-dasharray="50"

и добавим stroke-dashoffset:

stroke-dasharray="50" stroke-dashoffset="25"

Пунктиры обводки сдвинулись на заданный отрезок по направлению против часовой стрелки. Значение stroke-dashoffset может быть отрицательным, и тогда обводка будет смещаться по часовой стрелке.


Выполнить задание
HTML
<svg width="200" height="200"> <circle r="70" cx="100" cy="100" fill="none" stroke="lightgrey" stroke-width="55"/> <circle r="70" cx="100" cy="100" fill="none" stroke="tomato" stroke-width="50"/> <circle r="70" cx="100" cy="100" fill="none" stroke="white" stroke-width="50" stroke-dasharray="20 90"/> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Добавьте последнему кругу атрибут stroke-dashoffset="10", чтобы выровнять белые линии на спасательном круге.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #17, который стартует 10 апреля.

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

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

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

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