mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

fix: resolve missing svg serialized content

Browse Source 
dealing with the issue of incomplete rendering content when using 'position: absolute' to render SVG
This commit is contained in:
Halo 2023-04-06 14:41:16 +08:00 committed by GitHub
parent 6020386bbe
commit 8301a3bfe0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/dom/replaced-elements/svg-element-container.ts
View File

@ -8,16 +8,26 @@ export class SVGElementContainer extends ElementContainer {
intrinsicHeight: number;
constructor(context: Context, img: SVGSVGElement) {
super(context, img);
const s = new XMLSerializer();
const bounds = parseBounds(context, img);
img.setAttribute('width', `${bounds.width}px`);
img.setAttribute('height', `${bounds.height}px`);
super(context, img)
const s = new XMLSerializer()
const bounds = parseBounds(context, img)
let originPosition: string = img.style.position
img.setAttribute('width', `${bounds.width}px`)
img.setAttribute('height', `${bounds.height}px`)
this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`;
this.intrinsicWidth = img.width.baseVal.value;
this.intrinsicHeight = img.height.baseVal.value;
// fix: resolve missing svg serialized content
// if svg's tag has absolute position, when converting through serializeToString, it will result in missing SVG content.
// so, it is necessary to eliminate positioning before serialization.
img.style.position = 'initial'
this.context.cache.addImage(this.svg);
this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`
// reset position
img.style.position = originPosition
this.intrinsicWidth = img.width.baseVal.value
this.intrinsicHeight = img.height.baseVal.value
this.context.cache.addImage(this.svg)
}
}