From 79a0924e6938045fa9eccc9f8f12c47addac8d65 Mon Sep 17 00:00:00 2001 From: Angelina Nguyen Date: Fri, 9 Feb 2024 16:13:08 +1100 Subject: [PATCH] see pr: https://github.com/niklasvh/html2canvas/pull/3048 Squashed commit of the following: commit 8301a3bfe0a16044dde55d82c7fc0aaa99dfabf6 Author: Halo <1654403734@qq.com> Date: Thu Apr 6 14:41:16 2023 +0800 fix: resolve missing svg serialized content dealing with the issue of incomplete rendering content when using 'position: absolute' to render SVG --- .../svg-element-container.ts | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/dom/replaced-elements/svg-element-container.ts b/src/dom/replaced-elements/svg-element-container.ts index ae9c5a4c4..45f842a8b 100644 --- a/src/dom/replaced-elements/svg-element-container.ts +++ b/src/dom/replaced-elements/svg-element-container.ts @@ -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`) + + // 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.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`; - this.intrinsicWidth = img.width.baseVal.value; - this.intrinsicHeight = img.height.baseVal.value; + 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); + this.context.cache.addImage(this.svg) } }