Перенос svg в страницу с помощью js

02 апреля 2022, 09:30

Я решил реализовал код, который переносит svg иконку, которую берёт из 'src' тега img с классом .svg. Код полностью отрабатывает, при этом есть ошибка в консоли

Uncaught TypeError: Cannot read property 'querySelector' of null at XMLHttpRequest.xhr.onreadystatechange

Вот и код:

let svg = document.querySelectorAll('.svg');
svg.forEach(element => {
  let img = element;
  let imgClass = img.getAttribute('class');
  let imgURL = img.getAttribute('src');
  let xhr = new XMLHttpRequest();
  xhr.open('GET', imgURL);
  xhr.responseType = 'document'; 
  xhr.onreadystatechange = function (data) {
    let svgi = xhr.response.querySelector('svg');
    if (typeof imgClass !== 'undefined') {
      svgi.setAttribute('class', imgClass);
    }
    img.replaceWith(svgi);
  }
  xhr.send();
})

Answer 1

Как правильно написали в комментах, xhr.response – это текст, и чтобы вытащить из него svg, нужно сделать следующее:

создать элемент, не прикрепляя его к дереву документа: const tempContainer = document.createElement('div')
поместить в него html (если в ответе действительно валидный hmtl): tempContainer.innerHTML = xhr.response (для примера: tempContainer.innerHTML = '<div><span id="test">test</span></div>')
вытащить необходимую часть, в вашем случае let svgi = tempContainer.querySelector('svg'); (в примере tempContainer.querySelector('#test'))
использовать её, как необходимо

(память от tempContainer освободится, когда исчезнут все ссылки на него)

PS правда, у вас ошибка гласит "Cannot read property 'querySelector' of null", а не of string, так что вам надо ещё проверить, что вы действительно получаете в ответе то, что нужно (и все эти манипуляции проводить после проверки typeof xhr.response == 'string')