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

Border render incorrectly on version 2.4.1 #256

Closed
Jackie1210 opened this issue Sep 17, 2023 · 4 comments · Fixed by #268
Closed

Border render incorrectly on version 2.4.1 #256

Jackie1210 opened this issue Sep 17, 2023 · 4 comments · Fixed by #268
Assignees

Comments

@Jackie1210
Copy link

Hi! @yisibl

This is satori contributor. I am going to upgrade @resvg/resvg-js to 2.4.1 so that satori can support more css feature like mix-blend-mode, but it cause some bug unexpectedly. I'll split them into some issues so that we can track.

This issue shows that @resvg/resvg-js does not render top red border correctly like before.

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="satori_bc-id"><rect x="0" y="0" width="100" height="100"/></clipPath></defs><mask id="satori_om-id"><rect x="4" y="1" width="94" height="96" fill="#fff"/><path width="100" height="100" fill="none" stroke="#000" stroke-width="2" d="M0,0 A0,0 0 0 1 0,0 h100 A0,0 0 0 1 100,0"/><path width="100" height="100" fill="none" stroke="#000" stroke-width="4" d="M100,0 A0,0 0 0 1 100,0 v100 A0,0 0 0 1 100,100"/><path width="100" height="100" fill="none" stroke="#000" stroke-width="6" d="M100,100 A0,0 0 0 1 100,100 h-100 A0,0 0 0 1 0,100"/><path width="100" height="100" fill="none" stroke="#000" stroke-width="8" d="M0,100 A0,0 0 0 1 0,100 v-100 A0,0 0 0 1 0,0"/></mask><path width="100" height="100" clip-path="url(#satori_bc-id)" fill="none" stroke="red" stroke-width="2" d="M0,0 A0,0 0 0 1 0,0 h100 A0,0 0 0 1 100,0"/><path width="100" height="100" clip-path="url(#satori_bc-id)" fill="none" stroke="green" stroke-width="4" d="M100,0 A0,0 0 0 1 100,0 v100 A0,0 0 0 1 100,100"/><path width="100" height="100" clip-path="url(#satori_bc-id)" fill="none" stroke="blue" stroke-width="6" d="M100,100 A0,0 0 0 1 100,100 h-100 A0,0 0 0 1 0,100"/><path width="100" height="100" clip-path="url(#satori_bc-id)" fill="none" stroke="yellow" stroke-width="8" d="M0,100 A0,0 0 0 1 0,100 v-100 A0,0 0 0 1 0,0"/></svg>

You can see the result in playground with svg above generated by satori

@yisibl
Copy link
Member

yisibl commented Sep 17, 2023

I have confirmed that there is no problem in the upstream resvg v0.35.0, due to more changes upstream, resvg-js needs some work to be upgraded to the latest version. I don't have the time at the moment.

@yisibl
Copy link
Member

yisibl commented Sep 18, 2023

Good news, @zimond said he had time recently to work on upgrading resvg to the latest version.

@Jackie1210
Copy link
Author

Wow!Thank you guys!

@yisibl
Copy link
Member

yisibl commented Oct 16, 2023

upgrade-resvg-34 branch results:

image

https://resvg-js-git-upgrade-resvg-34-yisibl.vercel.app/

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

Successfully merging a pull request may close this issue.

3 participants