[ ✔ ] 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.
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:
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 throughSVGElementContainer, it will generate Incomplete rendering. The reason is:XMLSerializerwill 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: