LinearGradient not working for fill of custom dot for <Line />

[PieterT2000]

Describe the bug

fill attribute values that link to a linearGradient definition won't work correctly. Instead of the gradient, a transparent fill is shown. For context, this happened when I tried to apply a gradient background (fill) to a custom dot shape in the Recharts LineChart component.

Reproduction

StackBlitz minimal reproduction

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that you're confident that this is a legitimate bug. To ask a question open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[EvHaus]

Looks like this is a bug with react-pdf itself. I've logged the ticket:

• stopOpacity prop in <Stop /> component causes rendering failure diegomura/react-pdf#3003

[PieterT2000]

Thanks, @EvHaus! The gradient is still missing in the PDF, even when all stop opacities are set to 1.

[EvHaus]

Looks like that another bug with react-pdf. 😔 I've logged a new ticket:

• Having more than one <Defs /> tag in an <Svg /> doesn't work diegomura/react-pdf#3004

I think I might be able to work around this one by merging any <defs> I find into a single one. I'll give that a try when I have a chance and ship a new version if that works.

[PieterT2000]

Thanks for the tip, @EvHaus; I've added a fix. Let me know your thoughts when you get time.

[github-actions]

🎉 This issue has been resolved in version 0.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀