SVGLineElement: свойство x1

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Свойство x1 только для чтения интерфейса SVGLineElement описывает начало SVG-линии вдоль оси x в виде SVGAnimatedLength. Оно отражает геометрическое свойство элемента <line>, а именно x1.

Значение атрибута — <length>, <percentage> или <number>. Численное значение SVGAnimatedLength.baseVal соответствует этому начальному положению как длине вдоль оси x в единицах системы координат пользователя.

Значение

Тип SVGAnimatedLength.

Пример

Рассмотрим следующий SVG:

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="30" x2="40" y2="50" stroke="blue" stroke-width="2" />
  <line x1="15%" y1="0" x2="30%" y2="60" stroke="red" stroke-width="4" />
</svg>

Мы можем получить вычисленные значения атрибутов x1:

const lines = document.querySelectorAll("line");
const x1Pos0 = lines[0].x1;
const x1Pos1 = lines[1].x1;
console.dir(x1Pos0.baseVal.value); // output: 20 (the value of `x1`)
console.dir(x1Pos1.baseVal.value); // output: 45 (15% of 300)

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # __svg__SVGLineElement__x1

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`x1`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGLineElement/x1