Possibly incorrect rendering of text

[02JanDal]

This SVG file:

SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve"
     viewBox="0 -103 335 70" width="1920px" height="1080px"
     style="background:black;color:white;fill:white;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="translate(167, -35) scale(0.8) translate(-167, 35)">
        <text x="35px" y="-60px"
              style="font-family:'AoboshiOne-Regular', 'Aoboshi One';font-size:50px;">
          ALHEIMERS
        </text>

        <text x="3px" y="-40px" textLength="332"
              style="width:220px;font-family:'AoboshiOne-Regular', 'Aoboshi One';font-size:20px;">
          Event&#160;&#160;•&#160;&#160;DJ&#160;&#160;•&#160;&#160;Uthyrning
        </text>
        <g mask="url(#pickup)">
          <clipPath id="d-inner">
            <path d="M 2 -60 L 2 -97.49 L 36 -97.49 L 36 -60 Z M 15.9 -91.59 A 12.83 12.83 0 0 0 15.9 -65.81 A 12.83 12.83 0 0 0 15.9 -91.59"
                  fill="red"/>
          </clipPath>
            <text x="0px" y="-60px" style="font-family:'AoboshiOne-Regular', 'Aoboshi One';font-size:50px;"
                  clip-path="url(#d-inner)">
            D
          </text>
            <clipPath id="d-round">
            <rect x="4px" y="-97.5px" width="40px" height="37.5px"/>
          </clipPath>
            <circle fill="none" stroke="currentColor" stroke-width="5.9px" cx="15.9px" cy="-78.76px" r="15.78px"
                    clip-path="url(#d-round)"/>
        </g>
        <mask id="pickup">
          <rect x="-1000" y="-1000" height="2000" width="2000" fill="white"/>
            <rect x="-10.5" y="-10" height="2" width="11.5" fill="black" rx="1" ry="1"
                  transform="translate(15.9, -78.77)"/>
            <rect x="-2.9" y="-10.1" height="3" width="5" fill="black" rx="1.5" ry="1.5"
                  transform="translate(15.9, -78.77) rotate(20)"/>
        </mask>
        <mask id="pickup-2">
          <rect x="-1000" y="-1000" height="2000" width="2000" fill="white"/>
            <rect x="-10.5" y="-10" height="2" width="11.5" fill="black" rx="1" ry="1"/>
            <rect x="-3.25" y="-10.05" height="3" width="5" fill="black" rx="1.5" ry="1.5" transform="rotate(20)"/>
        </mask>

        <g class="disc" transform="translate(15.9, -78.77)">
          <g mask="url(#pickup-2)">
            <g transform="scale(1.15)">
              <g transform="rotate(-65)" class="rotatable">
                <circle stroke="currentColor" stroke-width="0px" fill="none" cx="0" cy="0" r="10px"/>
                  <circle fill="currentColor" cx="0" cy="0" r="3px"/>
                  <path d="M -8 0 A 8 8 0 0 1 -6.12836 -5.1423" fill="none" stroke="currentColor" stroke-linecap="round"
                        stroke-width="1px"/>
                  <path d="M -5.5 0 A 5.5 5.5 0 0 1 -4.21324 -3.53533" fill="none" stroke="currentColor"
                        stroke-linecap="round" stroke-width="1px"/>
              </g>
            </g>
          </g>
            <g>
            <path stroke="currentColor" stroke-width="1px" stroke-linecap="round" fill="none"
                  d="M -9.5 -9 L 0 -9 L 3 -8"/>
                <path stroke="currentColor" stroke-width="2px" stroke-linecap="round" fill="none"
                      d="M 1.5 -8.5 L 3 -8"/>
          </g>
        </g>
    </g>
</svg>

And this code (based on the example from the README):

Code

const { promises } = require('fs')
const { join } = require('path')
const { Resvg } = require('@resvg/resvg-js')

async function main() {
  const svg = await promises.readFile(join(__dirname, './_assets/logo/og_image.svg'))
  const opts = {
    background: 'black',
    fitTo: {
      mode: 'width',
      value: 1920,
    },
    font: {
      fontFiles: ['./_assets/sass/AoboshiOne-Regular.ttf'], // Load custom fonts.
      loadSystemFonts: false, // It will be faster to disable loading system fonts.
      // defaultFontFamily: 'Source Han Serif CN Light', // You can omit this.
    },
  }
  const resvg = new Resvg(svg, opts)
  const pngData = resvg.render()
  const pngBuffer = pngData.asPng()

  console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
  console.info('Output PNG Size  :', `${pngData.width} x ${pngData.height}`)

  await promises.writeFile(join(__dirname, './test-out.png'), pngBuffer)
}

main()

I get the following result:

However, opening the same SVG file in Chrome gives me this (expected) result:

Three things mainly seem of when rendering with this library:

• The first <text> ("ALHEIMERS") is to far to the right
• The second <text> ("Event...") is not getting stretched according to the textLength
• The third <text> ("D") is missing entirely

Is this a bug in the resvg rendering? (or, just as likely, is there something wrong with my SVG?)