SVG contentDocument

Loaded SVG won't let access to its DOM

by kumiau

HTML

<svg id="svg-sprite">
  <use href="#mi-ciudad-div-normal" />
</svg>

CSS

body {
  background: #fff;
}

JavaScript

$.get("https://cdn.jsdelivr.net/gh/kumiau/temprepo/menu_sprites.svg", function(data) {           
  var div = document.createElement("div");                                 
  div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);         
  document.body.insertBefore(div, document.body.childNodes[0]);
  const inserted_svg = $(div).children()[0];
  const used_svg = $('#svg-sprite')[0];
  
  // contentDocument
  console.log('dynamic svg contentDocument:', inserted_svg.contentDocument);
  console.log('defined svg contentDocument:', used_svg.contentDocument);
  
  // ownerDocument
  console.log('dynamic svg ownerDocument', inserted_svg.ownerDocument);
  console.log('defined svg ownerDocument', used_svg.ownerDocument);
  
  inserted_svg.getElementById("mi-ciudad-entra-1").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-2").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-3").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-4").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-5").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-6").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-7").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-8").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-9").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-10").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-11").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-12").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-13").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-14").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-15").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-16").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-17").beginElement();
  inserted_svg.getElementById("mi-ciudad-entra-18").beginElement();
 ...