Cropped svg in downloading pdf using html2pdf javascript?

svg it is rendered perfectly in HTML, but when I download it is not rendering properly. why?

in html

in PDF

Code

function saveAsPDF() {
            var element = document.getElementById('printableArea');
            var opt = {
                margin: 0.3,
                filename: 'download.pdf',
                image: {type: 'jpeg', quality: 1},
                html2canvas: {scale: 4, dpi: 72, letterRendering: true},
                jsPDF: {unit: 'in', format: 'A2'},
                html2canvas: {
                    onclone: (element) => {
                        const svgElements = Array.from(element.querySelectorAll('svg'));
                        svgElements.forEach(s => {
                            const bBox = s.getBBox();
                            s.setAttribute("x", bBox.x);
                            s.setAttribute("y", bBox.y);
                            s.setAttribute("width", bBox.width);
                            s.setAttribute("height", bBox.height);
                        })
                    }
                }
            };
            html2pdf().set(opt).from(element).save();
        }