search

niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.57k stars 4.81k forks source link

svg transform gets applied twice #2960

Open KS-HTK opened 2 years ago

KS-HTK commented 2 years ago

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:

waleedbintariq1 commented 1 year ago

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.

peterlacko commented 1 year ago

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

waleedbintariq1 commented 1 year ago

@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.

tanatuosi commented 1 year ago

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.

peterlacko commented 1 year ago

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

VhMuzini commented 8 months ago

Facing the same problem.