Html2canvas: not able to capture svg image

Created on 28 Jun 2018 · 7Comments · Source: niklasvh/html2canvas

not able to capture svg image ..

Any Solution ,Please help

Source

Manaskumar119

Most helpful comment

I want to add another solution based on @motodimago 's solution, that is for dynamic created svg's which you can not add width or height staticly. I faced that problem with amcharts, which i can not add width and height to created svg charts.

html2canvas(this.ImageCanvas,
        {
            onclone: (element) => {
                const svgElements: any[] = element.body.getElementsByClassName("printable-area")[0].getElementsByTagName("svg");
                Array.from(svgElements).forEach((svgElement) => {
                    const bBox: any = svgElement.getBBox();
                    svgElement.setAttribute("width", bBox.width);
                    svgElement.setAttribute("height", bBox.height);
                });
            },
        }).then((canvas) => {
            document.body.appendChild(canvas);
        });

muratcatal on 14 Aug 2018

👍9 🎉2

All 7 comments

+1, also running into this issue.

Cellcote on 6 Jul 2018

👍1

+1 here is a codesandbox that reproduces the issue:

https://codesandbox.io/s/wo3oww275k

alansouzati on 6 Jul 2018

I can not capture this.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">...</svg>

But I can capture this svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">...</svg>

I just add width and height.

motodimago on 11 Jul 2018

👍5

html2canvas(this.ImageCanvas,
        {
            onclone: (element) => {
                const svgElements: any[] = element.body.getElementsByClassName("printable-area")[0].getElementsByTagName("svg");
                Array.from(svgElements).forEach((svgElement) => {
                    const bBox: any = svgElement.getBBox();
                    svgElement.setAttribute("width", bBox.width);
                    svgElement.setAttribute("height", bBox.height);
                });
            },
        }).then((canvas) => {
            document.body.appendChild(canvas);
        });

muratcatal on 14 Aug 2018

👍9 🎉2

Thanks @muratcatal , this fixes most of our issues.

Cellcote on 14 Aug 2018

Thanks @muratcatal