EasyQRCodeJS: The width doesn't render correctly

Question

I'm trying to create qrCode in my view using EasyQRCodeJS,I'm using Ionic/Cordova.

The options:

let qrcodeWidth = this.qrcodeEl.nativeElement.offsetWidth*0.8;
let options = {
  text: qrCodeText,
  logo: "assets/imgs/qrCode/logo.svg",
  logoBackgroundTransparent: true,
  width: qrcodeWidth,
  height: qrcodeWidth,
  logoWidth: 59,
  drawer: 'svg',
}
let qrcode = new QRCode(this.qrcodeEl.nativeElement, options);

I test that with a div#qrcodeEl that has 300px in the width so the qrcodeWidth is 240px, the render return qrcode has 260px instead of 240px.

I even try to for the width using onRenderingStart() function, still the same problem.

Answer 1

Add this after generating the svg:

// Remove attributes width and height and add viewbox with width and hight so it will be resize in the middle
setTimeout(_=>{
  this.qrcodeEl.nativeElement.childNodes[0].attributes.removeNamedItem('width');
  this.qrcodeEl.nativeElement.childNodes[0].attributes.removeNamedItem('height');
  this.qrcodeEl.nativeElement.childNodes[0].viewBox.baseVal.width = qrcodeWidthScaled;
  this.qrcodeEl.nativeElement.childNodes[0].viewBox.baseVal.height = qrcodeWidthScaled;
}, 1000);