SVG-линия
Описание элемента <line>
Элемент SVG <line> создает прямые линии. Поскольку элементы <line> геометрически одномерны, у них нет внутренней области, и они никогда не заполняются. Атрибут fill для этого элемента игнорируется.
Пример элемента SVG <line>:
Пример элемента SVG <line>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="310" width="400">
<line x1="50" y1="30" x2="300" y2="300" style="stroke:rgb(8, 112, 177);stroke-width:3" />
</svg>
</body>
</html>Разберем приведенный выше код:
- Атрибут
x1задает начальную координату по оси X. - Атрибут
y1задает начальную координату по оси Y. - Атрибут
x2задает конечную координату по оси X. - Атрибут
y2задает конечную координату по оси Y.
По умолчанию линии рисуются черной обводкой толщиной 1 пиксель. Вы можете настроить их с помощью атрибутов stroke и stroke-width, как показано в примере.
SVG <line> против SVG <path>
Элементы SVG <line> и <path> оба рисуют линии, но служат для разных целей. Элемент <line> специально предназначен для простых прямых линий и является более семантически корректным и эффективным для этой задачи. Элемент <path> используется для определения сложных форм или нескольких соединенных линий и кривых. Хотя <path> может рисовать прямые линии, для базовых прямых отрезков обычно лучше использовать <line>, а <path> оставлять для более сложных рисунков.
Элемент SVG <line> также поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Какие обязательные атрибуты SVG нужны для создания линии в HTML?