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

Linear gradient with repeated stops with offset="0" does not render #151

Open
goransle opened this issue Aug 27, 2020 · 5 comments
Open
Labels
bug difficulty:beginner Hacktoberfest help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request.

Comments

@goransle
Copy link

Describe the bug
Linear gradient with repeated stops with offset="0" does not render.

To Reproduce
See this playground.

Expected behavior
I would have expected the PDF to render the same way as the SVG.
This is in accordance to the following SVG spec: https://www.w3.org/TR/SVG2/pservers.html#StopNotes.

Desktop:

  • OS: OSX Catalina (10.15.5)
  • Browser Chrome
  • Version 84.0.4147.135
@yGuy
Copy link
Member

yGuy commented Aug 27, 2020

I can confirm that this doesn't work. I guess the important part of the spec is the following. It also hints at the workaround or possible implementation in the conversion:

If two gradient stops have the same offset value, then the latter gradient stop controls the color value at the overlap point. In particular:

<stop offset="0" stop-color="white"/>
<stop offset=".2" stop-color="red"/>
<stop offset=".2" stop-color="blue"/>
<stop offset="1" stop-color="black"/>

will have approximately the same effect as:

<stop offset="0" stop-color="white"/>
<stop offset=".1999999999" stop-color="red"/>
<stop offset=".2" stop-color="blue"/>
<stop offset="1" stop-color="black"/>

which is a gradient that goes smoothly from white to red, then abruptly shifts from red to blue, and then goes smoothly from blue to black.

@yGuy yGuy added bug help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request. labels Aug 27, 2020
@yGuy
Copy link
Member

yGuy commented Aug 27, 2020

Interestingly this seems to work with values which are not 0 and having two different colors both at 0 really doesn't make any sense. So I would suggest to also reconsider the implementation that actually produces two different colors both at offset 0 what would be the expected behavior in the case, after all?

@goransle
Copy link
Author

@yGuy We could replace the second offset with a very low number, but I see now that there is also a difference in the gradient produced then: playground.

@yGuy
Copy link
Member

yGuy commented Aug 27, 2020

You're right; both (at least Chrome) and the PDF are wrong and behave against the spec. Even with both offsets at exactly 0 you should not be seeing this thin red line in the SVG and the PDF seems to round up the value to about 0.05
But at least with this workaround the PDF isn't completely broken.

@HackbrettXXX
Copy link
Member

jsPDF linearly samples the gradient colors, which is why very hard edges are washed out. As a fix we should probably implement the workaround @yGuy mentioned. When there are multiple stops at 0 or 1, we can ignore the "outer" stops.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug difficulty:beginner Hacktoberfest help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request.
Projects
None yet
Development

No branches or pull requests

3 participants