html2canvas 识别 svg 解决方案

参考： 预览地址 http://jsfiddle.net/bv16o50f/1/

html

<div class="visualization">
  <svg xmlns="http://www.w3.org/2000/svg" class="chart-container" width="900" height="440">
    <g transform="translate(90, 10)">
      <g transform="translate(0, 302)">
        <path fill="none" stroke="#777" d="M 0 6 V 0 H 779 V 6" />
      </g>
      <g>
        <line stroke="#2e9ccc" stroke-width="50" transform="translate(253)" x1="0" y1="302" x2="0" y2="14" />
        <line stroke="#2e9ccc" stroke-width="100" transform="translate(253)" x1="150" y1="302" x2="150" y2="119" />
      </g>
    </g>
  </svg>
</div>

js

html2canvas([$('div.visualization')[0]], {
    useCORS: true
  }).then(function (canvas) {
    if (navigator.msSaveBlob) {
      console.log('this is IE');
      var URL=window.URL;
      var BlobBuilder = window.MSBlobBuilder;
      navigator.saveBlob=navigator.msSaveBlob;
      var imgBlob = canvas.msToBlob();
      if (BlobBuilder && navigator.saveBlob) {
        var showSave =  function (data, name, mimetype) {
          var builder = new BlobBuilder();
          builder.append(data);
          var blob = builder.getBlob(mimetype||"application/octet-stream");
          if (!name)
            name = "Download.bin";
          navigator.saveBlob(blob, name);
        };
        showSave(imgBlob, 'barchart.png',"image/png");
      }
    } else {
      if ($('#export-image-container').length == 0)
          $('body').append('<a id="export-image-container" download="barchart.jpg">')
      img = canvas.toDataURL("image/jpeg")
      img = img.replace('data:image/jpeg;base64,', '')
      finalImageSrc = 'data:image/jpeg;base64,' + img

      $('#export-image-container').attr('href', finalImageSrc)
      $('#export-image-container')[0].click()
      $('#export-image-container').remove()
    }
  });

css

div.visualization {
   width:1009px;
   height:440px;
   overflow:visible;
   background-color: #fff;
   color:transparent;
}