Error: Unable to parse color from string: url(#pattern) when using method PDFPage.drawSvg

[4ur3-zut]

What were you trying to do?

Trying to draw an SVG element that contains a pattern definition and a polygon using it.

How did you attempt to do it?

Using PDFPage.drawSvg the same way you would with a solid color fill.

What actually happened?

Error: Unable to parse color from string: url(#pattern)

It tries to parse the reference to the pattern as a solid color.
The call to drawSvg fails and nothing is drawn.

What did you expect to happen?

Either draw the pattern correctly or recognize the feature as not implemented and finish drawing the polygon with a transparent fill.

How can we reproduce the issue?

I've included the files patternTest.js and patternTest.svg in a zip file.
You can run node patternTest.js to see the error and open patternTest.svg in a web browser to confirm what it looks like.

patternTest.js:

import { PDFDocument } from '@cantoo/pdf-lib';

const svg = `<svg width="1000" height="1000" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="pattern" width="5" height="5" patternTransform="rotate(35) scale(4)" patternUnits="userSpaceOnUse">
            <rect width="5" height="5" style="stroke:none; fill: #f003"></rect>
            <rect width="2.5" height="5" style="stroke:none; fill: #f007"></rect>
        </pattern>
    </defs>
    <polygon points="0,0 0,100 100,100 100,0" fill="url(#pattern)" stroke="#000000" stroke-width="2.5" stroke-dasharray="6 3"></polygon>
</svg>`;

const document = await PDFDocument.create();

const page = document.addPage();

page.moveTo(10, 10);
page.drawSvg(svg); // <-- it will break here

Additionally this example won't trigger any errors with a solid color as fill value.
Note that my node is in module mode ("type": "module" in package.json).

patternTest.zip

Version

2.2.4

What environment are you running pdf-lib in?

Browser

Checklist

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

Additional Notes

My all in one example is in node, but my use case is in browser.

[Sharcoux]

For now, defs and pattern are not supported. Sorry. You can try a PR if you like.

[Sharcoux]

In case someone wants to give it a shot, you'll need to parse and recreate the pattern by drawing it repeatedly on the pdf with drawSvg. That's not necessarily that hard, especially with a good AI nearby. Everything should be available in the svg.ts file.

[4ur3-zut]

In a generic case, you'd have to clip around the filled shape to erase parts of the repeated pattern that are outside the filled shape.

It doesn't feel that trivial to me, but implementing clip-path (it seems like pdf specifications do have something for that) and then using it in a workaround for pattern could do the trick.

I'm not a specialist of the subject and I've only skimmed through svg.ts, so maybe there's a simpler way I haven't thought of.
Parsing all tiles and checking whether they're okay, or must be discarded, or must be altered would be a brute force method that doesn't convince me.

[Sharcoux]

In a generic case, you'd have to clip around the filled shape to erase parts of the repeated pattern that are outside the filled shape.

drawSvg should already be taking care of that aspect.

Parsing all tiles and checking whether they're okay, or must be discarded, or must be altered would be a brute force method that doesn't convince me.

You should:

1. create the svg pattern (potentially in a "g" tag for easy translation)
2. count how many times it fits horizontally in the viewBox
3. count how many times it fits vertically in the viewBox
4. In a double "for" loop, draw the pattern repeatedly, translating it by iwidth and jheight where i and j are the loop indexes, and width/height is the size of the pattern

The parsing of the pattern xml should be done using node-html-better-parser that is included in the project and we are maintaining

[4ur3-zut]

Wouldn't that just fill the whole viewBox?
How do you fill a circle, a triangle, or anything that is less than the complete viewBox?

I've noticed drawSvg clips around the viewBox, yes, but clipping around an arbitrary shape inside of the viewBox is different. Is that possible? If so, I would have expected clip-path to work.

[Sharcoux]

Ah, my bad, I misunderstood your problem. Well, yeah, in that case, that's another thing. I have no idea how you could do that easily, to be honest.

[4ur3-zut]

Looking at the clipSpace operation, and the clip operator, could I write something similar to clip around an arbitrary path?

If that works, it opens a lot of possibilities.

[Sharcoux]

Looking at the clipSpace operation, and the clip operator, could I write something similar to clip around an arbitrary path?

If that works, it opens a lot of possibilities.

On the svg side, in the intersections.ts file, we are able to compute intersection between various objects, but not an arbitrary path. However, maybe we can use the clip system from pdf side, but that part I don't know well...