[Solved]-Export SVG with external CSS to server-d3.js

In order to export a SVG, it's essential to have the styles inline. But if you're looking for a workaround for the styles already coming in from an external CSS file, here's an approach to do that.

DEMO IMPLEMENTING EXPORTING OF SVG WITH EXTERNAL CSS STYLING

In the code, the function named addInlineStyling receives a list of elements and the associated properties, extracts styles/property values using Window.getComputedStyles method and assigns to the element respectively.

Relevant code:

function addInlineStyling(elements) {
  if(elements && elements.length) {
    elements.forEach(function(d) {
     d3.selectAll(d.el).each(function(){
      var element = this;
      if(d.properties && d.properties.length) {
        d.properties.forEach(function(prop) {
          var computedStyle = getComputedStyle(element, null),
            value = computedStyle.getPropertyValue(prop);
          element.style[prop] = value;
        });
      }
    });
   });
  }
}

Feel free to modify the way the array is being sent and used to extract styles but I wanted to let you know that this is one approach to doing that. ALTHOUGH IT'S ADVISABLE TO HAVE INLINE STYLING.

And please add the missing styles (if any).

Here's the exported image:

Hope this helps. :)