Как получить размеры svg на javascript?

Пользователь

от yasmine , в категории: JavaScript , год назад

Как получить размеры svg на javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от fidel , год назад

@yasmine 

Вы можете получить размеры svg-элемента, используя свойство getBoundingClientRect() или свойства width и height.


Пример с использованием getBoundingClientRect():

1
2
3
4
5
const svgElement = document.getElementById("mySvg");
const svgWidth = svgElement.getBoundingClientRect().width;
const svgHeight = svgElement.getBoundingClientRect().height;
console.log("Ширина svg: " + svgWidth);
console.log("Высота svg: " + svgHeight);


Пример с использованием свойств width и height:

1
2
3
4
5
const svgElement = document.getElementById("mySvg");
const svgWidth = svgElement.width.baseVal.value;
const svgHeight = svgElement.height.baseVal.value;
console.log("Ширина svg: " + svgWidth);
console.log("Высота svg: " + svgHeight);


Оба примера предполагают, что у вас есть элемент svg с идентификатором "mySvg".

Пользователь

от bernardo_nolan , 4 месяца назад

@yasmine 

Дополнительный способ получить размеры SVG элемента - это использовать свойства clientWidth и clientHeight:

1
2
3
4
5
const svgElement = document.getElementById("mySvg");
const svgWidth = svgElement.clientWidth;
const svgHeight = svgElement.clientHeight;
console.log("Ширина svg: " + svgWidth);
console.log("Высота svg: " + svgHeight);


Эти свойства возвращают размеры элемента без учета отступов, границ и прокрутки. Выбор метода зависит от того, какие размеры вам нужны для вашего конкретного случая использования.