title: svg to canvas image in jspdf - I Get a black content
body: <blockquote>
    <p>I've used jspdf to convert the svg image to canvas and then to pdf</p>
    
    <blockquote>
      <p>The plugins I've used are</p>
      
      <blockquote>
  <pre><code>&lt;script type="text/javascript" src="assets/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets/js/jspdf.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets/js/html2canvas.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets/js/html2canvas.svg.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets/js/canvg.js"&gt;&lt;/script&gt;
  </code></pre>
      </blockquote>
    </blockquote>
    
    <p>My HTML code for the svg is </p>
  </blockquote>
  
  <pre><code>&lt;a href="javascript:genPdf();"&gt;genpdf&lt;/a&gt;
  
  &lt;svg class="bullet" width="416" height="50"&gt;
      &lt;g transform="translate(75,5)"&gt;
          &lt;rect class="range s0" width="301" height="25" x="0"/&gt;
          &lt;rect class="range s1" width="250.83333333333334" height="25" x="0"/&gt;
          &lt;rect class="range s2" width="200.66666666666666" height="25" x="0"/&gt;
          &lt;rect class="measure s0" width="230.76666666666668" height="8.333333333333334" x="0" y="8.333333333333334"/&gt;
          &lt;rect class="measure s1" width="210.7" height="8.333333333333334" x="0" y="8.333333333333334"/&gt;
          &lt;g class="tick" transform="translate(0,0)" style="opacity: 1;"&gt;
              &lt;line y1="25" y2="29.166666666666668"/&gt;
              &lt;text text-anchor="middle" dy="1em" y="29.166666666666668"&gt;0&lt;/text&gt;
          &lt;/g&gt;
          &lt;g class="tick" transform="translate(50.16666793823242,0)" style="opacity: 1;"&gt;
              &lt;line y1="25" y2="29.166666666666668"/&gt;
              &lt;text text-anchor="middle" dy="1em" y="29.166666666666668"&gt;5&lt;/text&gt;
          &lt;/g&gt;
          &lt;g class="tick" transform="translate(100.33333587646484,0)" style="opacity: 1;"&gt;
              &lt;line y1="25" y2="29.166666666666668"/&gt;
              &lt;text text-anchor="middle" dy="1em" y="29.166666666666668"&gt;10&lt;/text&gt;
          &lt;/g&gt;
          &lt;g class="tick" transform="translate(150.5,0)" style="opacity: 1;"&gt;
              &lt;line y1="25" y2="29.166666666666668"/&gt;
              &lt;text text-anchor="middle" dy="1em" y="29.166666666666668"&gt;15&lt;/text&gt;
          &lt;/g&gt;
          &lt;g class="tick" transform="translate(200.6666717529297,0)" style="opacity: 1;"&gt;
              &lt;line y1="25" y2="29.166666666666668"/&gt;
              &lt;text text-anchor="middle" dy="1em" y="29.166666666666668"&gt;20&lt;/text&gt;
          &lt;/g&gt;
          &lt;g class="tick" transform="translate(250.8333282470703,0)" style="opacity: 1;"&gt;
              &lt;line y1="25" y2="29.166666666666668"/&gt;
              &lt;text text-anchor="middle" dy="1em" y="29.166666666666668"&gt;25&lt;/text&gt;
          &lt;/g&gt;
          &lt;g class="tick" transform="translate(301,0)" style="opacity: 1;"&gt;
              &lt;line y1="25" y2="29.166666666666668"/&gt;
              &lt;text text-anchor="middle" dy="1em" y="29.166666666666668"&gt;30&lt;/text&gt;
          &lt;/g&gt;
          &lt;g x="200" y="100" style="text-anchor: end;" transform="translate(-6,12.5)"&gt;
              &lt;text class="title"&gt;NOVORA&lt;/text&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <blockquote>
    <p>I'm unable to get the exact image that is required as an output when I generate it to pdf.
    I'm converting the svg to canvas but still I'm unable to get the desired output. Instead of the exact image I get a black content inside that.
    The css code for the above one is</p>
  </blockquote>
  
  <pre><code>.bullet {
      font: 10 px sans-serif;
  }
  .bullet.marker {
      stroke: #000;
      stroke-width: 2px;
  }
  .bullet .tick line {
      stroke: # 666;
      stroke-width: .5px;
  }
  .bullet.range.s0 {
      fill: #eee;
  }
  .bullet.range.s1 {
      fill: #ddd;
  }
  .bullet.range.s2 {
      fill: #ccc;
  }
  .bullet.measure.s0 {
      fill: steelblue;
  }
  .bullet.measure.s1 {
      fill: #fff;
  }
  .bullet.measure.s2 {
      fill: steelblue;
  }
  .bullet.measure.s3 {
      fill: lightsteelblue;
  }
  .bullet.title {
      font-size: 10px;
      font-weight: bold;
  }
  .bullet.subtitle {
      fill: #999;
  }
  </code></pre>
  
  <blockquote>
    <p>The javascript that helps me rendering the data is</p>
  </blockquote>
  
  <pre><code>function genPdf(){
      var svgElements = $("#page-content-wrapper").find('svg');
  
        //replace all svgs with a temp canvas
      svgElements.each(function() {
          var canvas, xml;
  
          canvas = document.createElement("canvas");
          canvas.className = "screenShotTempCanvas";
          // canvas.getContext("3d");
          //convert SVG into a XML string
          xml = (new XMLSerializer()).serializeToString(this);
  
          // Removing the name space as IE throws an error
          xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
  
          //draw the SVG onto a canvas
          canvg(canvas, xml);
          $(canvas).insertAfter(this);
          $(this).addClass('tempHide');
          $(this).hide();
      });
      html2canvas(document.getElementById('page-content-wrapper'), {
          onrendered: function (canvas){
              var img = canvas.toDataURL("image/jpeg",1.0);
              var doc = new jsPDF();
              doc.addImage(img, 'JPEG' , 10, 10);
              doc.save('test.pdf');
          }
      });
      setTimeout(function(){
          $("#page-content-wrapper").find('.screenShotTempCanvas').remove();
          $("#page-content-wrapper").find('.tempHide').show().removeClass('tempHide');
          $("#page-content-wrapper").find('.bullet').show();
      },2000);
  }
  
  function getStyle(el, styleProp) {
      var camelize = function(str) {
          return str.replace(/\-(\w)/g, function(str, letter) {
              return letter.toUpperCase();
          });
      };
  
      if (el.currentStyle) {
          return el.currentStyle[camelize(styleProp)];
      } else if (document.defaultView &amp;&amp; document.defaultView.getComputedStyle) {
          return document.defaultView.getComputedStyle(el, null)
          .getPropertyValue(styleProp);
      } else {
          return el.style[camelize(styleProp)];
      }
  }
  </code></pre>
  
  <blockquote>
    <p>Please help me out in this. Thanks</p>
  </blockquote>