<line>
Базовый уровень Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она поддерживается браузерами с июля 2015 года.
Элемент <line> SVG представляет собой простую фигуру SVG, используемую для создания линии, соединяющей две точки.
Контекст использования
| Категории | Элемент простой фигуры, графический элемент, элемент фигуры |
|---|---|
| Допустимое содержимое | Любое количество следующих элементов в любом порядке: Элементы анимации Описательные элементы |
Атрибуты
x1-
Задаёт координату начальной точки линии по оси X. Тип значения: <length> | <percentage> | <number>; Значение по умолчанию:
0; Анимируемый: да x2-
Задаёт координату конечной точки линии по оси X. Тип значения: <length> | <percentage> | <number>; Значение по умолчанию:
0; Анимируемый: да y1-
Задаёт координату начальной точки линии по оси Y. Тип значения: <length> | <percentage> | <number>; Значение по умолчанию:
0; Анимируемый: да y2-
Задаёт координату конечной точки линии по оси Y. Тип значения: <length> | <percentage> | <number>; Значение по умолчанию:
0; Анимируемый: да pathLength-
Задаёт общую длину пути в пользовательских единицах. Тип значения: <number>; Значение по умолчанию: нет; Анимируемый: да
Интерфейс DOM
Этот элемент реализует интерфейс SVGLineElement.
Пример
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
<!-- If you do not specify the stroke
color the line will not be visible -->
</svg>
Спецификации
| Спецификация |
|---|
| Scalable Vector Graphics (SVG) 2> # LineElement> |
Совместимость с браузерами
| Настольные компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
line |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
systemLanguage |
1 | 12 | 12 | 8 | 3 | 18 | 14 | 14 | 3 | 1.0 | 3 | 3 |
x1 |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
x2 |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
y1 |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
y2 |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
См. также
- Другие простые фигуры SVG:
<circle>,<ellipse>,<polygon>,<polyline>,<rect>
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/line
