diegomura / diegomura/react-pdf

SVGs Not Cooperating in Render Function

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

Description

I'm trying to render a SVG inside a View's render function (I want a header that does not appear on the first page, so by using the View's render function I can access the pageNumber). However, when the SVG is inside the render function, nothing I do to change its size works. I've tried editing the viewbox and other attributes and putting the SVG in a View, but it has a mind of its own. If I remove it from the View's render function and just have it as a child of a View, it works fine. But then I lose access to pageNumber.

In the below, Logo is the SVG in question. And the styles on the Views seem to make no difference to it.

```
{
if (pageNumber != 1) {
return (





{
return `Page ${pageNumber} of ${totalPages}`;
}}
/>


);
}
}}
/>
```

**To Reproduce**

1. Create a layout with a View
2. In the View's render attribute, return a SVG element
3. The SVG will render, but any attempts to change the size will have no effect.

**Expected behavior**
I would expect that no matter where the SVG is rendered, I can adjust it. I have the exact same SVG in other places in the PDF, and it responds just fine.

**Desktop:**

- OS: MacOS
- Browser: Arc
- React-pdf version: 4.1.6

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.