4

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

2
  • как обычно... Ничего сложного... Все тоже самое, что и с DOMобычным элементом
    – Air
    14 мая 2018 в 5:58
  • Хорошо ,а как тогда по Click менять цвет ID самого svg обьекта ?
    – Karter
    14 мая 2018 в 7:19

2 ответа 2

4

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


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

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

<object type="image/svg+xml" data="sprite.svg" > Your browser does not support SVG </object>

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

<div class="container">
<svg class="icon-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="images/sprite.svg#user"></use>
</svg>   
</div> 

<div class="container">
<svg class="icon-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="images/sprite.svg#home"></use>
</svg>   
</div>

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

1
  • Саша я ему вчера писал о use
    – user33274
    14 мая 2018 в 10:11
4

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, возвращает промис со ссылкой на добавленное (на корневой узел). 
// В отличие от более простого метода добавления через <object>, позволяет избежать ограничений политики same-origin при доступе к дочерним узлам
function loadSvgInto(el, url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest(); 
    xhr.open('GET', url); 
    xhr.overrideMimeType('image/svg+xml');
    xhr.onloadend = function () {
      if (this.status === 200) {
        let de = this.responseXML.documentElement;
        el.appendChild(de);
        resolve(de);
      }
      else
        reject(); 
    }; 
    xhr.send();
  }); 
}

Если нужно навесить id, то просто

loadSvgInto(...).then(svg => { 
  svg.id = 'any-id'; 
  ... 
}); 
6
  • отличный ответ, но на мой взгляд для людей, которые начинают разбираться с svg в первую очередь необходимо разобраться в нативном svg, как это всё работает, а затем переходить на новый уровень - использовать JS 14 мая 2018 в 8:36
  • Спасибо ОГРОМНОЕ за помощь , сейчас буду дальше разбираться .
    – Karter
    14 мая 2018 в 8:50
  • Просто сейчас ищу самый простой вариант например той же замены цвета СВГ-ешного рисунка по нажатию кнопки .Чтоб большой код не писать
    – Karter
    14 мая 2018 в 8:53
  • @Alexandr_TT, относительно порядка изучения, я с Вами полностью согласен. Но все-таки, раз автор хочет манипулировать SVG-элементами средствами JS, мы никак не можем заставлять его отказаться от этой идеи. Тем более что в сумме с вашим ответом, получается почти полная картина возможных вариантов... не хватает разве что манипуляций свойствами посредством CSS-правил :)
    – yar85
    14 мая 2018 в 9:12
  • 1
    @technoimpextechnoimpex, рад был помочь! Если в примере что-то непонятно - спрашивайте, я дополню.
    – yar85
    14 мая 2018 в 9:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.