title: Highcharts getSVG() - Keep HTML formatting in legend
body: <p>I'm trying to get the SVG for a Highchart and retain the CSS formatting in the returned SVG so that it represents the Highchart as it is currently displayed to the user.</p>
  
  <p>Currently, it seems that if I use the <a href="http://api.highcharts.com/highcharts/Chart.getSVG" rel="nofollow noreferrer">getSVG()</a> function, then the custom HTML legend is not rendered correctly.  In the following example, I use this method and render a SVG element and render it on the screen to compare the differences.</p>
  
  <p><a href="http://jsfiddle.net/ngovqp93/7/" rel="nofollow noreferrer">Example</a>:</p>
  
  <pre><code>  $(function () {
  
      Highcharts.chart('container', {
  
          exporting: {
              chartOptions: { // specific options for the exported image
  
                  plotOptions: {
                      series: {
                          dataLabels: {
                              enabled: true
                          }
                      }
                  }
              },
              scale: 3,
              fallbackToExportServer: false
          },
  
          title: {
              text: 'Offline export'
          },
          legend:{
              useHTML: true,
                          navigation: { enabled: false },
                          align: 'center',
                          verticalAlign: 'bottom',
                          symbolWidth: 0,
                          symbolHeight: 0,
                          labelFormatter: function() {
                              return '&lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&lt;/ul&gt;';
                          }
          },
  
          subtitle: {
              text: 'Click the button to download as PNG, JPEG, SVG or PDF'
          },
  
          chart: {
              type: 'area'
          },
  
          xAxis: {
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          },
  
          series: [{
              data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4]
          }]
  
      });
  
      var chart = $('#container').highcharts();
      createSVGFromChart(chart, $('#svg'));
  
  
  });
  
  function createSVGFromChart(chart, $target){
   $target.html(chart.getSVG());
  }
  </code></pre>
  
  <p>Which renders the legend inside of the foreignObject element to allow for proper HTML rendering.  However, it seems that this object is not rendered as I thought it would be.  The elements seem to be offset and not visible.  Further inspection of the foreign object results in the following HTML:</p>
  
  <pre><code>    &lt;foreignObject x="0" y="0" width="200" height="200"&gt;
      &lt;div class="highcharts-legend" style="position: absolute; left: 266px; top: 313px; opacity: 1;"&gt;
          &lt;div style="position: absolute; left: 0px; top: 0px; opacity: 1;"&gt;
              &lt;div style="position: absolute; left: 0px; top: 0px; opacity: 1;"&gt;
                  &lt;div class="highcharts-legend-item highcharts-area-series highcharts-color-0 highcharts-series-0" style="position: absolute; left: 8px; top: 3px; opacity: 1;"&gt;&lt;span style="font-family: 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 12px; position: absolute; white-space: nowrap; color: rgb(51, 51, 51); font-weight: bold; cursor: pointer; margin-left: 0px; margin-top: 0px; left: 5px; top: 3px; fill: rgb(51, 51, 51);"&gt;&lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&lt;/ul&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/foreignObject&gt;
  </code></pre>
  
  <p>I've gone ahead and created a jsfiddle (<a href="https://jsfiddle.net/m795q6qy/" rel="nofollow noreferrer">here</a>) with just that foreignObject element inside SVG to see what it would render.  While it seems that the original chart's legend would be properly placed via absolute positioning, they still do not render.  After inspecting the inline styles, you can see that the first child element of the foreignObject has an absolute positioning that places itself outside of the foreginElement's container.  I was able to confirm this by manually changing the inline style of that element so that the left and top position were both 0.  </p>
  
  <p>So the question, how do I go about getting the SVG of the Highchart as it is currently rendered along with any embedded HTMl so that it properly represents what the user is seeing?</p>
  
  <p>Also, getChartHTML does not solve this problem as it only fetches the HTML, not SVG.</p>