lovell
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')
librsvg currently does not support dominant-baseline (or alignment-baseline), see:
https://gitlab.gnome.org/GNOME/librsvg/issues/414
As a workaround, use dy=".25em" to shift the text along the y-axis or try to specify the offset manually (as you did).
