Рисуем линии

Линии рисуются с помощью тега line. Координаты начала линии задаются атрибутами x1 и y1, координаты конца — атрибутами x2 и y2. Координаты можно задавать в процентах.

Пример кода:

<line x1="220" y1="10" x2="20" y2="130"/>

Так как линия не образует фигуру с внутренним контуром, для отображения ей нужно задать не заливку, а обводку. Обводкой управляют два атрибута: stroke и stroke-width. Атрибут stroke задаёт цвет обводки, stroke-width — толщину линии.

<line x1="220" y1="20" x2="20" y2="90" stroke="violet"stroke-width="5" />

Результат:

Можно задать только цвет линии, тогда толщина обводки по умолчанию будет равна одному пикселю.