Hello. Given: - svg sprite

<svg style="display: none;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <!-- набор <symbol> --> </defs> </svg>

  • script that using ajax inline this sprite in html

 <script> var ajax = new XMLHttpRequest(); ajax.open("GET", "assets/template/images/sprite.svg", true); ajax.send(); ajax.onload = function(e) { var div = document.createElement("div"); div.innerHTML = ajax.responseText; document.body.insertBefore(div, document.body.childNodes[0]); } </script>
- a site running CMS MODX, on which it is all implemented. - in the page code, the icons from the sprite are inserted like this:

 <svg class="icon icon-tools" ><use xlink:href="#icon-tools"/></svg>

Problem: in all browsers except IE icons from the sprite are pulled up only on the first page. On the inside is empty.

Thanks for any advice or help.

  • "assets/template/images/sprite.svg" an absolute address, and not a relative one is worth asking? - Visman 4:08 pm
  • I tried, and there is no problem in this place - svg is loaded and inserted into html is solved if you insert the page address in xlink <svg class = "icon icon-tools"> <use xlink: href = "{here url of the current page} #icon -tools "/> </ svg> but why a) is the only way if the current page b) works in IE - rebroff
  • @rebroff Have you solved the problem? If not, then maybe I can, I will help. - Alexandr_TT
  • Solved the problem by specifying a relative url: <svg class = "icon icon-tools"> <use xlink: href = "/ page.html # icon-tools" /> </ svg>, but for the main page it does not work - it’s there display svg without url. Perhaps you will tell a more competent way? - rebroff
  • @rebroff CMS MODX is not familiar, but I dream to meet :) I read from the reviews that the Html pages for this CMS do not need to be modified, inserted as is. Therefore, probably the rules for including SVG files in HTML pages remain the same. To begin, look at this article ru.stackoverflow.com/q/645927/28748 , new ideas may arise, ask and so that people can see your messages quickly, start them with "@ username" - Alexandr_TT

0