Skip to content

Instantly share code, notes, and snippets.

@nautilytics
Created June 10, 2021 13:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nautilytics/46f5022e5336739beaaa4ddc1a128dab to your computer and use it in GitHub Desktop.
Save nautilytics/46f5022e5336739beaaa4ddc1a128dab to your computer and use it in GitHub Desktop.

SVG Rendering Bug with Safari and html2canvas

Summary

There is a rendering bug when trying to take a screenshot of an SVG element when using Safari and html2canvas.

See below for example screenshots using html2canvas. As you can see below when fill is an attribute of the svg:path element it is rendered correctly, but when fill is defined as a style it does not render correctly.

With our choice of charting library this may not be possible to fix at the present, but something to note as we look into building more custom data visualizations in the future.

With <path fill='red' />:

With <path style='fill:red />:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment