Fix svgs for html2canvas WIP (use GET needs work)

convert.js

Array.from(document.querySelectorAll('use')).forEach(function (use) {

  var
    svg = use.parentNode,
    url = use.getAttribute('xlink:href').split('#'),
    url_root = url[0],
    url_hash = url[1],
    xhr = new XMLHttpRequest()

  if (!xhr.s) {
    xhr.s = []

    xhr.open('GET', url_root, false)
    xhr.send()

    console.log('onload 1')
    var x = document.createElement('x'),
      s = xhr.s

    x.innerHTML = xhr.responseText

    xhr.onload = function () {
      try {
        console.log('onload 2')
        s.splice(0).map(function (array) {
          var g = x.querySelector('#' + array[2])
          if (g) {
            array[0].insertBefore(g, array[1])
            array[1].setAttribute('xlink:href', '#' + array[2])
            var svg = array[0]
            var myCanvas = document.createElement('canvas')

            // Get drawing context for the Canvas
            var myCanvasContext = myCanvas.getContext('2d')
              // Load up our image.
            var source = new Image()
            var xml = new XMLSerializer().serializeToString(svg)
            var data = 'data:image/svg+xml;base64,' + btoa(xml)
            source.src = data
              // Render our SVG image to the canvas once it loads.
            $(source).ready(function () {
              var clientWidth = svg.clientWidth || svg.parentNode.clientWidth
              var clientHeight = svg.clientHeight || svg.parentNode.clientHeight
              myCanvas.width = clientWidth
              myCanvas.height = clientHeight
              myCanvasContext.drawImage(source, 0, 0, clientWidth, clientHeight)
              $(svg).replaceWith(myCanvas)
            })
          }
        })
      } catch (ex) {
        console.log(ex)
      }
    }
    console.log('calling')
    xhr.onload()
  }

  xhr.s.push([svg, use, url_hash])

  if (xhr.responseText) xhr.onload()
})