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

SVG gradients do not render properly #153

Open
jwright6323 opened this issue Apr 10, 2023 · 4 comments
Open

SVG gradients do not render properly #153

jwright6323 opened this issue Apr 10, 2023 · 4 comments

Comments

@jwright6323
Copy link

Gist: https://gist.github.com/jwright6323/666747665d920d6bc294959be24f6822

I am seeing that gradients are rendered based on the image's location within a page rather than a component's position within the SVG (see example in Gist above).

@mogest
Copy link
Owner

mogest commented Jan 28, 2024

I tried to replicate this but can't. See _multiple_gradients.pdf which shows two of the SVG you provided displayed on top of each other.

Given this is quite old I'll close it for now, but if you can replicate it and provide a code example using only prawn and prawn-svg I'd be happy to look into it.

@mogest mogest closed this as not planned Won't fix, can't repro, duplicate, stale Jan 28, 2024
@mojavelinux
Copy link
Contributor

mojavelinux commented Feb 2, 2024

I can confirm this is an issue. If you use the following script, you'll see that even though the SVGs are stacked, the gradient is always drawn from the same x,y position on the page, so the second and third SVGs are missing their gradient.

require 'prawn'
require 'prawn-svg'

Prawn::Document.generate 'out.pdf' do
  svg (File.read 'tmp.drawio.svg'), width: 100
  svg (File.read 'tmp.drawio.svg'), width: 100
  svg (File.read 'tmp.drawio.svg'), width: 100
end

@mogest
Copy link
Owner

mogest commented Feb 2, 2024

Interesting! I had width: 300, it appears that if it's width: 321 then it perfectly aligns and the gradients show. Thanks, this gives me something to go off.

@mogest mogest reopened this Feb 2, 2024
@mogest
Copy link
Owner

mogest commented Feb 3, 2024

I can replicate it (_multiple_gradients.pdf) and the first svg is the one that gets the gradient, no matter where on the screen it is.

Looking at the PDF though (upload to https://pdfprettyprint.com if you want a go), all seems fine. I initially thought it was reusing the gradient definitions, but no, each rect has its own gradient, and they're all at different co-ordinates.

Looking at the code, I can see nothing except the gradients that get cached in a registry between calls to prawn-svg.

Quite confused. If you spot anything in the PDF, do let me know...

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

3 participants