Управление SVG подключенного через img

#javascript #svg #анимация

Можно ли, с помощью JS, как-то управлять стилями, атрибутами svg, который подключен
через тег img ?
    

Ответы

Ответ 1

Считайте что нет, разве что вот так:



requestAnimationFrame(draw);

function draw(t) {

  let svg = ``
 
  img.setAttribute("src", 'data:image/svg+xml;base64,' + btoa(svg))
  
  requestAnimationFrame(draw);

}



Ответ 2

Вдохновленный ответом @StrangerintheQ, придумал вот такую реализацию. Из-за кросс-доменности
запросов, здесь не получается воспроизвести результат. Но локально все работает.



const img_origin = document.getElementById('img_origin');
const src  = img_origin.src;

const xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
 xhr.send();
console.log('Запрос ушел');
xhr.onreadystatechange = function() {
  if (xhr.readyState != 4) return;
  if (xhr.status == 200) {
const result = xhr.responseText;
console.log(result)
const parser = new DOMParser();
const doc = parser.parseFromString(result, "application/xml");
const svg = doc.querySelector('svg');
svg.setAttribute('stroke', 'red')
svg.setAttribute('fill', 'red');
const str = new XMLSerializer().serializeToString(svg)
const img_modify = document.getElementById('img_modify');
img_modify.setAttribute("src", 'data:image/svg+xml;base64,' + btoa(str))
  }
};