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

bug report: SVG rendering using absolute positioning will produce missing #3047

Open
halo951 opened this issue Apr 7, 2023 · 0 comments · May be fixed by #3048
Open

bug report: SVG rendering using absolute positioning will produce missing #3047

halo951 opened this issue Apr 7, 2023 · 0 comments · May be fixed by #3048

Comments

@halo951
Copy link

halo951 commented Apr 7, 2023

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

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

Bug reports:

When rendering svg, if position: absolute; is used on the svg element, and it is not located in the upper left corner of the parent container (left: 0; top: 0;), when it is converted into an image through SVGElementContainer, it will generate Incomplete rendering. The reason is: XMLSerializer will calculate the position attributes of the element, resulting in incomplete converted images.

中文原文 (English is not good, hope to understand)

在渲染svg时, 如果svg元素上使用了 position: absolute; 定位, 并且没有位于父容器的左上角(left: 0; top: 0;), 在通过 SVGElementContainer 转化为图片时, 会产生渲染内容残缺。原因是: XMLSerializer 会将元素的定制属性计算进去, 导致转化的图片出现残缺.

example

https://codesandbox.io/p/github/halo951/issue-html2canvas/master?file=%2Fsrc%2FApp.vue&workspace=%257B%2522activeFilepath%2522%253A%2522%252Fsrc%252FApp.vue%2522%252C%2522openFiles%2522%253A%255B%2522%252Fsrc%252FApp.vue%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clg659avv000x356ijqjo89hc%2522%253A%257B%2522key%2522%253A%2522clg659avv000x356ijqjo89hc%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522key%2522%253A%2522clg659hbq005q356io4rkvhc4%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clg659avv000x356ijqjo89hc%2522%252C%2522spacesOrder%2522%253A%255B%2522clg659avv000x356ijqjo89hc%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D

Specifications:

  • html2canvas version tested with: 1.4.1 (latest)
  • Browser & version: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
  • Operating system: window 10
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.

1 participant