Рисование прямой с помощью SVG <line>

Элемент SVG <line> является базовой формой SVG, используемой для создания линии, соединяющей два точки. Элемент <line> используется для рисования линий внутри SVG изображения. Можно нарисовать горизонтальные прямые линии, вертикальные прямые линии, наклонные прямые линии и т.д.

Онлайн-пример SVG line

Ниже приведены несколько примеров простых часто используемых SVG <line> для рисования прямых линий:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<line　x1="0"　　y1="10"　x2="0"　　　y2="100"　style="stroke:#006600;">
　　　　　　　　<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"></line>
　　　　　　　　<line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"></line>
　　　　　　　　<line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"></line>
</svg>

После выполнения кода эффект прямой будет выглядеть так:

Начало прямой определяется точкой, заданной свойствами x1 и y1.
Конец прямой определяется точкой, заданной свойствами x2 и y2.
Свойство style устанавливает цвет и толщину линии.