HTML2canvas SVG graph IE11

[ArjunMahadik]

I am using Newest version of html2canvas ("html2canvas": "^1.0.0-alpha.9") to convert HTML as well as SVG graphs. It is working fine with chrome but not working on IE 11. Is there any need to handle SVG graphs?

[AKSET]

I am also facing the same issue. In chrome everything seems fine. In IE 10/11, for pie charts, the conversion is successfully but for bar graph, I am seeing black background.

[smkart]

Same issue here , Please help to fix it

Thanks Mani

[lreiner]

Doesnt work for me in newest Versions.

[nettiopsu]

Yes, there is a bug. Both inline and in image SVG files are not displayed in html2canvas in IE11, it seems to be removed from canvas at all (?), as it is not appearing even as a black box.

One solution here could be transforming SVG to PNG through Canvas, as PNG is still working.

Chrome and Firefox working fine with SVG

[mfield1]

I'm also having this problem with v1.0.0-alpha.12 when trying to export highcharts graphs via IE11. They just don't show up.

I did temporarily switch to v0.5.0-alpha1 and the highcharts graphs exported just fine in IE11 (but couldn't stay on that version for other reasons).

I've got a temporary workaround using canvg/canvg but it comes with it's own issues and I hate having to use another library.

I'd love to see SVG IE11 export support added to HTML2canvas.

[prestonj]

Ditto - 1.0.0 alpha 12 doesn't seem to display highcharts graphs (5.0.2) in IE11.

0.5.0 beta 4 was displaying corrupt graphs in IE11. Pie charts were warped and labels were duplicated.

[upuxaa]

my TypeScript solution to make svgs render onto the screenshot: ` import { Canvg } from 'canvg'; ... private convertSvgD3ChartsToPngs(): HTMLImageElement[] { const pngD3Charts: HTMLImageElement[] = [];

Array.from(document.getElementsByTagName('svg')).map(svg => { let svgD3ChartCanvas = document.createElement('canvas');

        // Increase the Pixel Density for the Screenshot
        svgD3ChartCanvas.width = parseInt(svg.getAttribute('width')) * 4;
        svgD3ChartCanvas.height = parseInt(svg.getAttribute('height')) * 4;

        let canvasContext = svgD3ChartCanvas.getContext('2d');

        // Use Canvg to convert the svg into a png
        let convertedSvgToPng = Canvg.fromString(
            canvasContext,
            (svg.parentNode as HTMLElement).innerHTML,
            {
                ignoreDimensions: true,
                scaleWidth: svgD3ChartCanvas.width,
                scaleHeight: svgD3ChartCanvas.height
            }
        );
        convertedSvgToPng.start();

        // Attach new png
        let pngD3Chart = new Image();
        pngD3Chart.src = svgD3ChartCanvas.toDataURL('image/png');
        pngD3Chart.style.width = '100%';
        pngD3Charts.push(pngD3Chart);

        // Remove HTML Attribute and use CSS
        (pngD3Chart as any).width = '';
        svg.parentNode.parentNode.appendChild(pngD3Chart);
        (svg.parentNode as HTMLElement).style.visibility = 'hidden';
        (svg.parentNode as HTMLElement).style.height = '0';
        (svg.parentNode as HTMLElement).style.minHeight = '0';
    });
    return pngD3Charts;
}`