Подключить svg (xml) к странице html + возможность управлять ID самого рисунка

#javascript #html #css #svg #svg_спрайт

Имеется рисунок svg, я его сохранил в xml  папке с сайтом и нужно как-то вывести
этот рисунок на страницу + управлять отдельными объектами этого svg рисунка с помощью
его ID. Может кто сталкивался с этим?
    

Ответы

Ответ 1

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

   

Может попробовать использовать проверенный и надёжный способ добавления SVG-спрайта
из отдельного файла в HTML с помощью .   


Подключение файла спрайта   


   


Вызов разных иконок из файла спрайта в разных местах HTML     





   
 


   





Более развернутый ответ здесь


Ответ 2

document.addEventListener('DOMContentLoaded', () => {
  loadSvgInto(document.body, 'https://httpbin.org/image/svg').then(svg => {
    svg.setAttribute('height', '170px'); 
    const rndColor = () => '#' + Math.floor(Math.random() * 0x111 + 0xddd).toString(16), 
          letters  = svg.querySelectorAll('#svg-text #S, #svg-text #V, #svg-text #G');
    for (let letter of letters)
      letter.style.transition = 'fill 1.5s linear'; 
    setInterval(() => {
      for (let letter of letters)
        letter.setAttribute('fill', rndColor()); 
    }, 1500); 
  }); 
});

// Добавляет SVG-разметку из url в элемент el, возвращает промис со ссылкой на добавленное
(на корневой узел). 
// В отличие от более простого метода добавления через