title: How do I pass the whole div to XEPOnline.js library and not just the first svg element?
body: <p>I am using css2pdf@cloudformatter to export my plotly.js svg to pdf. It works nicely, but it does not export the colorbar of the heatmap. I am using the "srctype:'svg'" option to save the svg in exactly the format as it is on my website. Please have a look at the fiddle <a href="http://jsfiddle.net/rk9540x5/4/" rel="nofollow noreferrer">http://jsfiddle.net/rk9540x5/4/</a> </p>
  
  <p>Here is the script: </p>
  
  <pre><code>&lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xeponline.jqplugin.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;!-- Source and on-click event for plotly.js --&gt;
  &lt;div id="plotly_chart" style="width: 90%; height: 270px"&gt;&lt;/div&gt;
  &lt;button onclick="return xepOnline.Formatter.Format('plotly_chart',{render:'download',srctype:'svg' });"&gt;Get  PDF&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
  Chart = document.getElementById('plotly_chart');
  
  var data = [
  {
  z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
  type: 'heatmap'
  }
  ];
  
  Plotly.newPlot('plotly_chart', data);
  &lt;/script&gt;
  </code></pre>
  
  <p>I did test it without the "srctype:'svg'" option, and this exports also the colorbar together with the plot, but the output does not look like the plot on the webpage anymore: the colorbar gets plotted below the heatmap. This suggests that css2pdf recognizes the div as two separate svg elements - one for the heatmap, and the other one for the colorbar. </p>
  
  <p>It also says on the cloudformatter.com homepage (<a href="http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage" rel="nofollow noreferrer">http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage</a>) that "if srctype:'svg' option is used, the first svg element in the containing div will be formatted alone". How do I get around this? Is there any way to move the colorbar svg element into the heatmap svg element? Here is an image of the DOM - you can see that there are two different svg#s, "infolayer" representing the colorbar svg.</p>
  
  <p><a href="https://i.stack.imgur.com/OvhBq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OvhBq.png" alt="enter image description here"></a></p>
  
  <p>I already tried the following to add the colorbar to the plotly chart, but it does not help:</p>
  
  <pre><code>var colorbar = {
     title: test,
     titlefont: {
       size: 12,
     },
     titleside: "top",
     thickness: 20,
     nticks: ticknumber,
     tickfont: {
       size:10.5
     },
     outlinewidth: 0,
     xpad: 1,
     ypad:3
     };    
  Plotly.newPlot('plotly_chart', data).append("colorbar");
  </code></pre>
  
  <p>Thanks for helping with this issue!</p>