Multi-line text misaligned in `Bitmap` created by `SvgDocument.Draw()`

[PajLe]

Description

Using SvgDocument.Draw() to create a Bitmap, and then save it as png/jpg produces an image with wrong text alignment:

It looks like the bottom line (tspan) is correctly aligned, but the top one is aligned with it, which is wrong.

Expected result:

Reproducible code:

string desktopPath = @"C:\Users\SomeUsername\Desktop\"; 
string svgPath = $"{desktopPath}original.svg";
SvgDocument doc = SvgDocument.Open(svgPath);

Bitmap b = doc.Draw();

using (var stream = new FileStream($"{desktopPath}{1}.png", FileMode.Create))
{
    b.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
}

using (var stream = new FileStream($"{desktopPath}{1}.svg", FileMode.Create))
{
    doc.Write(stream);
}

Example data

Source SVG (original.svg)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" x="0" y="0" width="290" height="290" viewBox="0, 0, 290, 290" preserveAspectRatio="xMidYMid" font-size="12px" font-family="'Lucida Grande','Lucida Sans Unicode',Arial,Helvetica,sans-serif" xml:space="default" class="highcharts-root">
  <desc xml:space="default">Created with Highcharts 9.1.2</desc>
  <defs xml:space="default">
    <clipPath id="highcharts-w55jk3t-33-" xml:space="default">
      <rect x="0" y="0" width="270" height="173" xml:space="default" style="fill:none;" />
    </clipPath>
    <clipPath id="highcharts-w55jk3t-35-" xml:space="default">
      <rect x="10" y="64" width="270" height="173" xml:space="default" style="fill:none;" />
    </clipPath>
  </defs>
  <rect x="0" y="0" width="290" height="290" xml:space="default" class="highcharts-background" style="fill:white;" />
  <rect x="10" y="64" width="270" height="173" xml:space="default" class="highcharts-plot-background" style="fill:none;" />
  <g xml:space="default" class="highcharts-pane-group" data-z-index="0" />
  <rect x="10" y="64" width="270" height="173" xml:space="default" class="highcharts-plot-border" data-z-index="1" style="fill:none;" />
  <g xml:space="default" class="highcharts-series-group" data-z-index="3">
    <g transform="translate(10, 64) scale(1)" xml:space="default" class="highcharts-series highcharts-series-0 highcharts-pie-series" data-z-index="0.1">
      <path d="M134.9907 41 A45.5 45.5 0 1 1 132.1631 41.08852 L135 86.5 A0 0 0 1 0 135 86.5 z" transform="translate(0, 0)" xml:space="default" stroke-linejoin="round" class="highcharts-point highcharts-color-0" style="fill:#2287C3;stroke:white;" />
      <path d="M132.2086 41.08571 A45.5 45.5 0 0 1 134.9368 41.00005 L135 86.5 A0 0 0 0 0 135 86.5 z" transform="translate(0, 0)" xml:space="default" stroke-linejoin="round" class="highcharts-point highcharts-color-1" style="fill:#464198;stroke:white;" />
    </g>
    <g transform="translate(10, 64) scale(1)" xml:space="default" class="highcharts-markers highcharts-series-0 highcharts-pie-series" data-z-index="0.1" />
  </g>
  <text x="145" y="24" color="#333333" text-anchor="middle" font-size="18px" class="highcharts-title" data-z-index="4" style="fill:#333333;">Abcde fg Habcdefghabcd<tspan x="145" dy="21">​</tspan>Abcdef</text>
  <g transform="translate(10, 64) scale(1)" xml:space="default" class="highcharts-data-labels highcharts-series-0 highcharts-pie-series" data-z-index="6">
    <path d="M142.304 161.9648 C137.304 161.9648 136.7547 143.9732 136.5716 137.976 L136.3885 131.9788" xml:space="default" class="highcharts-data-label-connector highcharts-color-0" style="fill:none;stroke:#2287C3;" />
    <path d="M127.696 11.03516 C132.696 11.03516 133.2453 29.02678 133.4284 35.02398 L133.6115 41.02119" xml:space="default" class="highcharts-data-label-connector highcharts-color-1" style="fill:none;stroke:#464198;" />
    <g transform="translate(147, 152)" xml:space="default" class="highcharts-label highcharts-data-label highcharts-data-label-color-0" data-z-index="1">
      <text x="5" y="16" color="black" xml:space="default" font-size="11px" font-weight="700" data-z-index="1" style="fill:black;">
        <tspan xml:space="default" stroke-width="2px" stroke-linejoin="round" class="highcharts-text-outline" style="fill:white;stroke:white;">99%<tspan x="5" y="16" xml:space="default">​</tspan></tspan>99%</text>
    </g>
    <g transform="translate(97, 1)" xml:space="default" class="highcharts-label highcharts-data-label highcharts-data-label-color-1" data-z-index="1">
      <text x="5" y="16" color="black" xml:space="default" font-size="11px" font-weight="700" data-z-index="1" style="fill:black;">
        <tspan xml:space="default" stroke-width="2px" stroke-linejoin="round" class="highcharts-text-outline" style="fill:white;stroke:white;">1%<tspan x="5" y="16" xml:space="default">​</tspan></tspan>1%</text>
    </g>
  </g>
  <g transform="translate(62, 249)" xml:space="default" class="highcharts-legend highcharts-no-tooltip" data-z-index="7">
    <rect x="0" y="0" width="166" height="26" xml:space="default" class="highcharts-legend-box" style="fill:none;" />
    <g xml:space="default" data-z-index="1">
      <g xml:space="default">
        <g transform="translate(8, 3)" xml:space="default" class="highcharts-legend-item highcharts-pie-series highcharts-color-0" data-z-index="1">
          <text x="21" y="18" color="#333333" xml:space="default" font-size="12px" font-weight="700" data-z-index="2" style="cursor:pointer;fill:#333333;">Abcdefgh</text>
          <rect x="2" y="7" width="12" height="12" rx="6" ry="6" xml:space="default" class="highcharts-point" data-z-index="3" style="fill:#2287C3;" />
        </g>
        <g transform="translate(96.675, 3)" xml:space="default" class="highcharts-legend-item highcharts-pie-series highcharts-color-1" data-z-index="1">
          <text x="21" y="18" color="#333333" xml:space="default" font-size="12px" font-weight="700" data-z-index="2" style="cursor:pointer;fill:#333333;">Abcdef</text>
          <rect x="2" y="7" width="12" height="12" rx="6" ry="6" xml:space="default" class="highcharts-point" data-z-index="3" style="fill:#464198;" />
        </g>
      </g>
    </g>
  </g>
  <g clip-path="url(#highcharts-w55jk3t-35-)" xml:space="default" class="highcharts-control-points" data-z-index="99" />
</svg>

Possibly related issues:

• Multiple tspan not rendering correctly #938
• text-anchor middle not rendering correctly #769
• Text not centred when multiple tspan elements are used #459
• text-anchor:middle/end not rendering on draw #431
• SVG Draw produces cropped text as PNG #901

Used Versions

SVG version: NuGet 3.4.2
.NET Core version: 3.1
Windows 10 version: 21H2