I was trying to make a pdf generator for my dashboard. It was working fine in chrome, but in firefox and IE, the graphs break. Also, I am unable to view certain images. What could be the reason? This is in Chrome and This is in Firefox

this is my code:

download(){
     const value = this.routes.url;
     const segment = /\/portal\/vc-portal\/(.+)/.exec(value)[1];
     const filename = segment.replace('/', '_').replace('-', '_');

     const element = document.getElementById('router') as HTMLElement;
     const opt = {
     pagebreak:    {mode:['avoid-all']},
     filename:     filename + '.pdf',
     image:        { type: 'jpeg', quality: 1},
     html2canvas:  { scale: 2 },
     jsPDF:        { unit: 'pc', format: 'a3', orientation: 'portrait' }
     };

    html2pdf().set(opt).from(element).save();

    }

How could something, work so good in one browser not work in the other?

This is the code of the circle-progress:

        <div class="progress-custom">
                <svg class="progress-circle" width="220px" height="200px" xmlns="http://www.w3.org/2000/svg">
                    <circle class="progress-circle-back"
                            cx="85" cy="85" r="80"></circle>
                    <circle class="progress-circle-prog" [ngClass]="{'progress-color-purple': showInPurple}"
                            cx="85" cy="85" r="80" [ngStyle]="{'stroke-dasharray': progress * 5.04 + ', ' + 999}"></circle>
                </svg>
                  <div class="progress-text">
                        <ng-content select="[ktCircleProgressBody]"></ng-content>
                  </div>
            </div>
</div>