Знакомство с SVG / Рисуем ломаные линии [14/15]
×

Рисуем ломаные линии [14/15]

Ломаные линии рисуются с помощью тега polyline. Координаты точек на линии задаются в атрибуте points, как для polygon.

Пример кода:

<polyline points="10,135 100,10 55,135 10,10 105,135"/>

Результат:

Разница между polygon и polyline заключается в поведении обводки: у многоугольника обводка замыкается сама по себе (левая фигура), а у ломаной линии — остаётся незамкнутой (фигура справа):


Выполнить задание
HTML
<svg width="200" height="200"> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Нарисуйте линию с координатами 50,180 100,20 150,180 20,80 180,80 50,180 100,20.
  2. Добавьте ей обводку цвета red толщиной 5 пикселей. Чтобы убрать чёрную заливку, задайте атрибуту fill значение none.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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