JSFiddle - React, Tailwind, and code Playground

by Victor Tang

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script src="https://gabelerner.github.io/canvg/StackBlur.js"></script>
<script src="https://gabelerner.github.io/canvg/canvg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
  <table width="100%">
        <tr>
            <td width="50%">
                <div id="chartOuter">
                    <div id="chart"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td width="50%">
				<img src="" id="fromcanvas"/>
            </td>
	  </tr>
    </table>

JavaScript

SVGElement.prototype.toDataURL = function(type, options) {
        var _svg = this;
        
        function debug(s) {
            console.log("SVG.toDataURL:", s);
        }

        function exportSVG() {
            var svg_xml = XMLSerialize(_svg);
            var svg_dataurl = base64dataURLencode(svg_xml);
            debug(type + " length: " + svg_dataurl.length);

            // NOTE double data carrier
            if (options.callback) options.callback(svg_dataurl);
            return svg_dataurl;
        }

        function XMLSerialize(svg) {

            // quick-n-serialize an SVG dom, needed for IE9 where there's no XMLSerializer nor SVG.xml
            // s: SVG dom, which is the <svg> elemennt
            function XMLSerializerForIE(s) {
                var out = "";
                
                out += "<" + s.nodeName;
                for (var n = 0; n < s.attributes.length; n++) {
                    out += " " + s.attributes[n].name + "=" + "'" + s.attributes[n].value + "'";
                }
                
                if (s.hasChildNodes()) {
                    out += ">\n";

                    for (var n = 0; n < s.childNodes.length; n++) {
                        out += XMLSerializerForIE(s.childNodes[n]);
                    }

                    out += "</" + s.nodeName + ">" + "\n";

                } else out += " />\n";

                return out;
            }

            
            if (window.XMLSerializer) {
                debug("using standard XMLSerializer.serializeToString")
                return (new XMLSerializer()).serializeToString(svg);
            } else {
                debug("using custom XMLSerializerForIE")
                return XMLSerializerForIE(svg);
            }
        
        }

        function base64dataURLencode(s) {
            var b64 = "data:image/svg+xml;base64,";

            // https://developer.mozilla.org/en/DOM/window.btoa
            if (window.btoa) {
               ...