drawSvgPath results in upside-down drawing

[bcholmes]

What were you trying to do?

I've been using the standard implementation of pdf-lib, but because it's basically abandonware, now, I tried to use the Cantoo version as a drop-in replacement.

It all worked well, but the only issue I encountered relates to a line drawing that I included on the PDF using the drawSvgPath method. With the standard pdf-lib, the path has the same orientation as the SVG drawing I extracted the path information from. With the Cantoo pdf-lib, the drawing is upside-down.

How did you attempt to do it?

Here's the code snippet I use. As I said, above, I'm trying to use it as a drop-in replacement for pdf-lib.

   drawOutline(pdf: PDFDocument, outline: string, options: SheetOutlineOptions) {
    const page = pdf.getPage(0);
    const scale =  PIXELS_TO_POINTS_RATIO * options.outlineScale;
    page.moveTo(options.outlineLocation.x, page.getHeight() - options.outlineLocation.y);
    page.drawSvgPath(outline, { borderColor: options.outlineColor,
        borderWidth: options.borderWidth / options.outlineScale,
        scale: scale })
}

I also tried using the matrix transform option in the SvgOptions to apply a flip operation, but that didn't seem to change the output.

What actually happened?

The outline appears upside-down (compared to the original SVG path), and renders above the y-axis (overlapping some PDF form elements).

What did you expect to happen?

The outline to appear in the same orientation as the original SVG diagram.

How can we reproduce the issue?

The main README for the project includes a code sample in JSFiddle. If run that code sample, you get one result.

If you update the code sample to use the Cantoo version (changing the script reference to https://unpkg.com/@cantoo/pdf-lib@1.20.4) and download the resulting PDF, the lines are upside-down compared to the initial result.

Version

1.20.4

What environment are you running pdf-lib in?

Browser

Checklist

• [X] My report includes a Short, Self Contained, Correct (Compilable) Example.
• [X] I have attached all PDFs, images, and other files needed to run my SSCCE.

Additional Notes

I'm pretty sure that this has something to do with the coordinate space of PDFs being the opposite of SVG (the origin of PDFs is in the lower left corner; SVG is in the upper left). My guess is that the additional SVG support available in the Cantoo version is having a side-effect, here.

[bcholmes]

I'm assuming that the JSFiddle reference satisfies the need for the short, self-contained example.

[Sharcoux]

I see nothing upside down

[bcholmes]

Here is the screenshot of the original document:

And here's the document created with the Cantoo version:

(I wondered, for a moment, if this was a problem specific to Mac Preview, but I see the same upsidedown-ness in Acrobat).

[Sharcoux]

Indeed. There is a problem when directly using drawSvgPath. We'll fix. Thanks.

[Sharcoux]

Solution released in v1.21.0

[bcholmes]

That was fast! Thank you so much!

[bcholmes]

For what it's worth, I've tested out this fix, and am using this version in my app now.