LinearGradient Component does not allow for selecting gradient direction with x1, y1, and x2, y2

[muchcreative]

Describe the bug LinearGradient props x1, x2, y1, y2 for defining the vector gradient direction do not work and end up removing the LinearGradient and it's Stops leaving you with just a single color rectangle with the Rect component.

To Reproduce Code snippet:

JSX:

<Svg viewBox='0 0 100 100' style={styles.scoreBg}>
    <Defs>
        <LinearGradient id='a' x1='0' y1='0' x2='40%' y2='40%'>
            <Stop offset='0%' stopColor='red' />
            <Stop offset='20%' stopColor='#fff'/>
            <Stop offset='100%' stopColor='#fff'/>
        </LinearGradient>
    </Defs>
    <Rect width='100%' height='100%' fill='url(#a)' />
</Svg>

CSS:

scoreBg: {
    position: 'absolute',
    top: '0px',
    left: '0px',
    width: '100px',
    height: 'auto',
    zIndex: '1',
},

Expected behavior

An SVG Viewer provides the following with the same transcribed SVG code. The linear gradient direction is diagonal starting at (0 , 0) to (40 , 40) x1=0, y1=0, x2=40%, x2=40%

Desktop:

• OS: Windows
• Browser: Chrome
• React-pdf version "3.4.2",

[wiemann]

+1

[muchcreative]

Our current dummy solution is that if you run fixed sizings on your components. You can import the SVG as a PNG or JPEG and position your generated content on-top of the PNG or JPEG. The same can be done with fixed sizes for box-shadows. You can create your card components or box-shadows in Figma and export them as PNGs or JPEGs.