SVG with dominant-baseline does not align percentage-based y coordinates properly

What is the output of running npx envinfo --binaries --languages --system --utilities?

npx: installed 1 in 1.188s

  System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 450.53 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.16.3 - /var/folders/l9/m0pyz89d1yj3566s_f86mb4c0000gn/T/fnm-shell-1301444/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.9.0 - /var/folders/l9/m0pyz89d1yj3566s_f86mb4c0000gn/T/fnm-shell-1301444/bin/npm
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.20.1 - /usr/local/bin/git
    Clang: 1100.0.33.12 - /usr/bin/clang
    Subversion: 1.10.4 - /usr/bin/svn
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 11.0.1 - /usr/bin/javac
    Perl: 5.18.4 - /usr/bin/perl
    PHP: 7.3.9 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.7.5 - /usr/local/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby

What are the steps to reproduce? Using sharp ^0.23.3, run the code snippets in the examples below.

What is the expected behaviour?

The picture should contain a circle with the letters AB centered inside of it.
However, the text is centered horizontally, and offset vertically.

Are you able to provide a standalone code sample, without other dependencies, that demonstrates this problem? Are you able to provide a sample image that helps explain the problem?

Current behaviour:

sharp(Buffer.from(`
<svg width="128" height="128">
  <g>
    <circle cx="64" cy="64" r="64" fill="#808080"></circle>
    <text x="50%" y="50%" font-family="Arial" font-weight="bold" font-size="48px" dominant-baseline="middle" text-anchor="middle" fill="white">AB</text>
  </g>
</svg>
`)).png().toFile('AB.png');

Expected behaviour (created by setting the offset manually, might be off by a few pixels):

sharp(Buffer.from(`
<svg width="128" height="128">
  <g>
    <circle cx="64" cy="64" r="64" fill="#808080"></circle>
    <text x="50%" y="80" font-family="Arial" font-weight="bold" font-size="48px" dominant-baseline="middle" text-anchor="middle" fill="white">AB</text>
  </g>
</svg>
`)).png().toFile('AB.png')

lovell / sharp

SVG with dominant-baseline does not align percentage-based y coordinates properly #1996