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.

Sign up for GitHub

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

Jump to bottom

Doesn't respect shape-rendering="crispEdges" #39

Open
seveibar opened this issue Sep 7, 2020 · 2 comments
Open

Doesn't respect shape-rendering="crispEdges" #39

seveibar opened this issue Sep 7, 2020 · 2 comments

Comments

@seveibar
Copy link

seveibar commented Sep 7, 2020

crispEdges prevents the edges from being anti-aliased. From my test using 0.8.1, the library is not handling this properly.

<svg width="800" height="800" shape-rendering="crispEdges">
    
    <g style="opacity: 1">
    <polygon points="377.65431676538424 205.3624637222935, 333.2707896086034 227.26704387521238, 326.1535600792077 276.2471741157318, 291.6058022263174 240.80481891901266, 242.82358531463566 249.17162402813128, 265.85542388322915 205.3624637222935, 242.8235853146356 161.55330341645572, 291.6058022263174 169.92010852557436, 326.15356007920764 134.47775332885521, 333.2707896086034 183.45788356937462"
            fill="#0f0" shape-rendering="crispEdges" stroke="" />
    </g>
  </svg>

Outputs:

clouds mask

image
@seveibar
Copy link
Author

seveibar commented Sep 7, 2020

It looks like this is a problem with canvg.

image

@yisibl
Copy link
Collaborator

yisibl commented Oct 22, 2021

Try resvg-js

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@seveibar @yisibl