Рисование линий с помощью SVG
Для того, чтобы нарисовать линию, необходимо задать координаты начальной и конечной точек по осям X и Y, а также указать цвет линии.
<!doctype html>
<html>
<head>
<title>Рисование линий с помощью SVG</title>
<meta charset='utf-8'/>
</head>
<body>
<svg>
<line line x1="10" y1="10" x2="200" y2="125" stroke="red"/>
</svg>
</body>
</html>
X1 и Y1 это координаты начальной точки, X2 и Y2 - координаты конечной точки.
Для регулировки толщины линии необходимо добавить атрибут "stroke-width" и его значение. Полностью код выглядит так.
<!doctype html>
<html>
<head>
<title>Рисование линий с помощью SVG</title>
<meta charset='utf-8'/>
</head>
<body>
<svg>
<line line x1="10" y1="10" x2="200" y2="125" stroke="red" stroke-width="4"/>
</svg>
</body>
</html>
А вот так более толстая линия выглядит в браузере.
Страница обновлена 19 февраля 2023 года.