Попытка использовать getBoundingClientRect() для добавленного элемента программно возвращает ширину и высоту 0

Question

Я пытаюсь получить getBoundingClientRect() из object элемент, который я только что добавил в body, но это возвращает width а также height 0. В настоящее время я исправил проблему, добавив SVG к HTML, содержащему ту же картинку, и установил видимость скрытым, а затем получил ширину и высоту. Размер объекта - это процент от размера окна, поэтому я не знаю об этом заранее.

let bulletSVG = document.createElement("object");
bulletSVG.setAttribute("class", "bullet"); 
bulletSVG.setAttribute("type", "image/svg+xml"); 
bulletSVG.setAttribute("data", "imgs/bullet.svg");

document.body.appendChild(bulletSVG);

console.log(bulletSVG.getBoundingClientRect());

Я бы предпочел не добавлять SVG в тело, чтобы получить ширину и высоту. Как я могу сделать?

Answer 1

Мое обоснованное предположение состоит в том, что браузер еще не знает размер изображения, так как вы не ожидаете полной загрузки изображения. Я бы сделал что-то подобное:

const load = (obj) => 
  new Promise(resolve => obj.onload = resolve);

async function addSVG() {
  let bulletSVG = document.createElement("object");
  bulletSVG.setAttribute("class", "bullet"); 
  bulletSVG.setAttribute("type", "image/svg+xml"); 
  bulletSVG.setAttribute("data", "imgs/bullet.svg");

  document.body.appendChild(bulletSVG);

  await load(bulletSVG);

  console.log(bulletSVG.getBoundingClientRect());
}

addSVG();

ОБНОВЛЕНИЕ Если ваш браузер не поддерживает обещания, и вы не можете / не хотите использовать транспортер (такой как Babel 7); Вы заставляете это работать, используя непосредственно обработчик событий, хотя это не будет так элегантно:

function addSVG() {
  let bulletSVG = document.createElement("object");
  bulletSVG.setAttribute("class", "bullet"); 
  bulletSVG.setAttribute("type", "image/svg+xml"); 
  bulletSVG.setAttribute("data", "imgs/bullet.svg");

  document.body.appendChild(bulletSVG);

  bulletSVG.onload = function() {
    console.log(bulletSVG.getBoundingClientRect());
  }
}