SVGs Not Cooperating in Render Function

[gwashburne]

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.

          <View
            fixed
            render={({ pageNumber }) => {
              if (pageNumber != 1) {
                return (
                  <View style={styles.header}>
                    <View style={styles.logoBox}>
                      <Logo />
                    </View>
                    <View style={styles.pageNumber}>
                      <Text
                        style={styles.headerText}
                        render={({ pageNumber, totalPages }) => {
                          return `Page ${pageNumber} of ${totalPages}`;
                        }}
                      />
                    </View>
                  </View>
                );
              }
            }}
          />

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

[anonfreak]

I have a similiar Issue here, but with the difference that the PDF is not loading at all afterwards by printing the following Error to console:

hook.js:608 TypeError: operations.forEach is not a function
    at applyTransformations (@react-pdf_renderer.js?v=f142c916:26248:14)
    at drawNode (@react-pdf_renderer.js?v=f142c916:26490:3)
    at @react-pdf_renderer.js?v=f142c916:26508:5
    at Array.forEach (<anonymous>)
    at drawChildren (@react-pdf_renderer.js?v=f142c916:26505:12)
    at @react-pdf_renderer.js?v=f142c916:26509:5
    at Array.forEach (<anonymous>)
    at drawChildren (@react-pdf_renderer.js?v=f142c916:26505:12)
    at renderSvg (@react-pdf_renderer.js?v=f142c916:26589:3)
    at renderNode (@react-pdf_renderer.js?v=f142c916:27845:5)

I encountered, that loading svg from a prop does not work, as when i use the same svg which is handed over by props directly inside the render function, it works...

<View
        fixed
        style={[styles.backgroundSvg, {}]}
        render={() => {
          return (
            <View>
              {svgLayout2}
              <View
                style={{
                  position: "absolute",
                  right: 0,
                  left: 0,
                  bottom: 0,
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                {footerContent}
              </View>
            </View>
          );
        }}
      ></View>

As i like to dynamically render svg layouts based on page numbers (so that i can switch between Layouts while page wrapping) this would be needed in order to work.

I'm also on Arc on MacOS if this has any relevance for this issue.

[anonfreak]

So i did some more debugging in the libs code and found that rendering components dynamically (using the render-function) seems to work differently from the "normal" rendering process, as i get some weird errors on another svg of mine when using the render props:

hook.js:608 Error: unsupported number: 486.2527.75

I also found the element in my svg:

<Rect
      x="486.25"
      y="596.25"
      width="55.5"
      height="55.5"
      rx="27.75"
      ry="27.75"
      fill="white"
      stroke="white"
      stroke-width="1.5"
    />

Seems that the svg props are not read or transformed correctly.