SVG позволяет рисовать прямые линии с помощью элемента < line >. Нужно только задать X и Y координаты начальных и конечных точек линий. Координаты допускается указывать без единиц измерения, в этом случае они будут расцениваться как пиксели, или явно указать единицы измерения (pt, pc, cm, mm, em, in).

Атрибут	Описание
X1	Начальная точка линии по оси абцисс
Y1	Начальная точка линии по оси ординат
X2	Конечная точка линии по оси абцисс
Y2	Конечная точка линии по оси ординат

Цвет, прозрачность линии

Все параметры оформления линий задаются с помощью стилей внутри тега
style = ” “>. В примере ниже задается цвет линий. Ширина для всех линий задается “stroke-width” внутри тега группы <g >

Прозрачность линий задается параметром – stroke-opacity: от “0” – полностью прозрачно, до “1” – непрозрачно 100%.

Пунктирные линии

Пунктирные линии реализуются с помощью атрибута stroke-dasharray. Первая цифра отвечает за длину черточки, вторая за пробел между черточками.
Комбинируя этими параметрами можно получить различные виды пунктирных линий, как показано на Рис.5 группа 1.

Обратите внимание на группу 2. Там показано, как можно соединить две прерывистые линии, чтобы получить одну пёструю ленту. Длина и пробелы обеих линии заданы с одинаковыми размерами – 10px, но начало второй линии сдвинуто относительно первой линии на 10px, поэтому черточка второй линии совмещается с пробелом первой линии.

В группе 4 на Рис.5 показаны четыре цифровых параметра атрибута stroke-dasharray:20 5 10 10. Первый параметр, 20 – длина черточки, 5 – длина пробела, затем 10 – длина черточки и 10 -длина пробела. Далее всё сначала – 20 длина черточки и т.д.

Атрибут stroke-linecap

Этот атрибут обеспечивает внешний вид концов линий см.Рис.7. Еще для примера, см.Рис.3, где можно улучшить внешний вид линий, сделав их концы круглыми, используя stroke-linecap=”round” см.Рис.8.

Примеры анимации линии ⇛
следующая: SVG polyline ⇛