Incorrect SVG text position with text-anchor=middle

[kevinresol]

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

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 70.16 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v10.19.0/bin/npm
    Watchman: 4.9.1 - /usr/local/bin/watchman
  Utilities:
    CMake: 3.15.2 - /usr/local/bin/cmake
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.21.1 - /usr/bin/git
    Clang: 1100.0.33.17 - /usr/bin/clang
    Subversion: 1.10.4 - /usr/bin/svn
    FFmpeg: 4.1 - /usr/local/bin/ffmpeg
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 1.8.0_112 - /usr/bin/javac
    Perl: 5.18.4 - /usr/bin/perl
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.7.3 - /usr/local/bin/python3
    Ruby: 2.5.1 - /Users/kevin/.rvm/rubies/ruby-2.5.1/bin/ruby

What are the steps to reproduce?

var sharp = require('sharp');
var fs = require('fs');

function genSvg(fontSize) {
	return Buffer.from(`<?xml version="1.0" encoding="utf-8"?>
	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		 viewBox="0 0 100 100" style="background-color:black" xml:space="preserve">
	<style type="text/css">
		.st0{fill:#E4A025;stroke:#FFFFFF;stroke-width:3}
	</style>
	<g transform="translate(0, 12)">>
		<path class="st0" d="M50,0L16.71,18.97v37.94L50,75.88l33.29-18.97V18.97L50,0L50,0z"/>
		<text font-weight="bold" font-size="${fontSize}" fill="yellow" x="50" y="42" dominant-baseline="middle" text-anchor="middle">5</text> 
	</g>
	</svg>`)
}

[12, 16, 48].forEach(fontSize => {
	var svg = genSvg(fontSize);
	fs.writeFileSync(`test${fontSize}.svg`, svg);
	
	sharp(svg, {density:720})
		.png()
		.resize(100, 100)
		.toFile(`test${fontSize}.png`)
		.then(info => console.log(info))
		.catch(e => console.error(e));
});

{
  "dependencies": {
    "sharp": "^0.24.1"
  }
}

What is the expected behaviour?

Rendered png should position the text correctly

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

See code snippet above

Are you able to provide a sample image that helps explain the problem?

Compare the svg file vs the rendered png file, the text position is incorrect. And it varies with font size.

[kevinresol]

Apparently text-anchor="middle" is the culprit

[lovell]

Did you see #1996 ?

[kevinresol]

Well that is about vertical alignment. This one is horizontal alignment.
But I think both are problems from the underlying svg library?

[kevinresol]

The symptoms mentioned in this thread seems to match what I am encountering.

[lovell]

The upstream librsvg issue has been closed and marked as fixed.

I've checked the latest sharp v0.27.1, which provides librsvg v2.50.2, and this does appear to have solved the original problem.