Оформление SVG-фигур / Концы линий [9/20]
×

Концы линий [9/20]

В SVG можно указывать, как ведёт себя обводка на концах линий, это делается с помощью свойства stroke-linecap. В примерах ниже мы добавили вспомогательные светлые линии с обводкой и показали возможные значения свойства stroke-linecap:

1. butt — значение по умолчанию. С этим значением обводка просто заканчивается на концах линии:

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

3. square, с этим значением вокруг концов линии добавляется дополнительная обводка с прямоугольными краями:

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

Хотите кодить на ES6? Записывайтесь на продвинутый интенсивный курс по JS.

Выполнить задание
HTML
<svg width="300" height="300"> <line x1="40" y1="50" x2="260" y2="50" stroke-width="50" stroke="tomato" stroke-linecap="butt"></line> <line x1="40" y1="150" x2="260" y2="150" stroke-width="50" stroke="gold"></line> <line class="shape-linecap" x1="40" y1="250" x2="260" y2="250" stroke-width="50" stroke="lightseagreen"></line> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Задайте второй линии атрибут stroke-linecap="round".
  2. В CSS третьей линии задайте свойство stroke-linecap со значением square.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #18, который стартует 7 августа.

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

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

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

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