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

Вид сгибов [10/20]

Свойство stroke-linejoin позволяет управлять видом обводки на сгибах линий.

Аналогично прошлому заданию мы добавили «воображаемую» светлую линию в примеры. Итак, возможные значения свойства stroke-linejoin:

1. miter — значение по умолчанию. Обводка в месте сгиба линии никак не видоизменяется.

2. round, обводка в месте сгиба линии равномерно закругляется.

3. bevel, обводка в месте сгиба линии складывается как лента.

В CSS внешним видом обводки на сгибах линий можно управлять с помощью аналогичного свойства stroke-linejoin.


Выполнить задание
HTML
<svg width="300" height="400"> <polyline points="40,150 150,40 260,150" fill="none" stroke-width="40" stroke="tomato" stroke-linejoin="miter"></polyline> <polyline points="40,260 150,150 260,260" fill="none" stroke-width="40" stroke="gold"></polyline> <polyline class="shape-linejoin" points="40,370 150,260 260,370" fill="none" stroke-width="40" stroke="lightseagreen"></polyline> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Задайте второй линии атрибут stroke-linejoin="round".
  2. В CSS третьей линии задайте свойство stroke-linejoin со значением bevel.
Теория Проверить Следующее задание
Идёт запись на курс Базовый JavaScript #10, который стартует 8 августа.

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

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

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

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