diegomura / diegomura/react-pdf

Having more than one `<Defs />` tag in an `<Svg />` doesn't work

Open
#3,004 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**

When rendering `` elements in `react-pdf`, if you have more than one `` component, only the children of the first one will be applied.

**To Reproduce**

```
const Test = () => (





);

ReactPDF.render();
```

https://react-pdf.org/repl?code=3187b0760ce02e00402a05368c0bc30050129503e0c0a061801e0044460057016c130a1d0a24801404301cc1479e78819401b871801dc025801328002c5002200ac001997c98321388e32a0280ccabd60f1094402110003c172987655dc36a7af6601bc03d002a18012400cc60013c412860009c11a84104106165c42049481003933cf141a8001dc0e8a000681334603822d9254de860008c10006c4144c5c41a1ac4402201ac61bd3c017df0012186c8d2215cdcf80065c4c010d82201c42aaa0a60a41528c128201125d4ac01196c8e0098ce434fe4d4432fe58fe4a7a6f9f8a04072604003d210f56eea6827c00c220268441451438e1889e77a7c5eaf12022be3f3f8029e30604e4c110852d41a940433ce1a8a45b8e1730592d56956a83098d3386a5d214a238cd94cd7b11a98b159ac199b4902820323083524f53d81c8e373b9581e7760bcbd4c10793dd994d477d7efb005dc7178ae94365b0f847c725ade0092dba8c428b146f049be484e26922d88ee7333c7cda60a0a5a9644d8320f1045800d78b006c8f3bb01828ebb804da0d6d8441ae8003118a2552840cb249875243e340a804440dd040128924f378723d18a593842f387b0b8ae164506841fc26000dcf87c0009516c0280b1480031001d144c09204045d0c44432132c3fc10000

If you remove the first `` component, the gradient in the circle will start to work. In HTML, this SVG works as expected.

**Expected behavior**

You should be able to reference the `id` of any `` inside the ``, not just the first one.

**Screenshots**

![Kapture 2024-12-19 at 22 25 46](https://github.com/user-attachments/assets/70f028c7-2999-4559-91a6-4a5c519c9ddb)

**Desktop (please complete the following information):**

- OS: All
- Browser: Chrome
- React-pdf version: @react-pdf/renderer@4.1.5

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.