html2canvas icon indicating copy to clipboard operation
html2canvas copied to clipboard

svg transform gets applied twice

Open KS-HTK opened this issue 2 years ago • 6 comments

  • [X] You are using the latest version
  • [x] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

html2canvas reapplies transforms to svg already transformed. https://jsfiddle.net/vqnpx582/

I mentioned this behavior in an answer to this stack overflow question That is also where some of the jsfiddle code comes from.

Here is a shorter example: https://jsfiddle.net/u79hzmpg/

This does not apply to a div with transform. It also does not matter if transform is in css or inline, it gets applied twice in both cases.

Specifications:

  • html2canvas version tested with: 1.4.1
  • Browser & version: Firefox 104.0.2 (64bit)
  • Operating system: archlinux, although I observed this under Windows too.

KS-HTK avatar Sep 20 '22 18:09 KS-HTK

Facing same issue. I wanted to get the image of leaflet map with os vector tiles. Html2Canvas works fine for the map, but the drawings (polygons) on the map have been shifted. I inspected the polygon and it was inside parent svg tag which had a transformation. I did not apply the transformation myself. It seems that the transformation values are updated when the map's view size is changed. I checked this by resizing the browser window. Anyways, the same transformation is being applied again (once or maybe multiple times) to the polygon by Html2Canvas which results in it being in an incorrect position when the image is generated. Any help would be appreciated.

waleedbintariq1 avatar Feb 15 '23 14:02 waleedbintariq1

Hi @waleedbintariq1, issue is still present in library, did you come up with some solution?

peterlacko avatar Aug 24 '23 11:08 peterlacko

@peterlacko Hi, its been a while since I worked on this problem. I don't think I actually found any solution for this in Html2Canvas. Instead, I used dom-to-image library to get the map's image.

waleedbintariq1 avatar Aug 24 '23 11:08 waleedbintariq1

I encountered the same issue, and I found that it was caused by the transition property in the styles. I'm not sure if you're facing the same problem.

tanatuosi avatar Aug 25 '23 03:08 tanatuosi

Hi @tanatuosi, for me translate property is the problem but I ended up updating it just before conversion so that the resulting pdf is correct. Far from ideal solution though

peterlacko avatar Aug 25 '23 11:08 peterlacko

Facing the same problem.

VhMuzini avatar Feb 29 '24 22:02 VhMuzini