Skip to content

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

Open
@halo951

Description

@halo951

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions