Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
muchcreative opened this issue Apr 9, 2024 · 0 comments

Comments

@muchcreative
Copy link

muchcreative commented Apr 9, 2024

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.

image

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%

image

Desktop:

  • OS: Windows
  • Browser: Chrome
  • React-pdf version "3.4.2",
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant