fix: resolve missing svg serialized content

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

View File

@ -8,16 +8,26 @@ export class SVGElementContainer extends ElementContainer {
intrinsicHeight: number; intrinsicHeight: number;
constructor(context: Context, img: SVGSVGElement) { constructor(context: Context, img: SVGSVGElement) {
super(context, img); super(context, img)
const s = new XMLSerializer(); const s = new XMLSerializer()
const bounds = parseBounds(context, img); const bounds = parseBounds(context, img)
img.setAttribute('width', `${bounds.width}px`); let originPosition: string = img.style.position
img.setAttribute('height', `${bounds.height}px`); img.setAttribute('width', `${bounds.width}px`)
img.setAttribute('height', `${bounds.height}px`)
this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`; // fix: resolve missing svg serialized content
this.intrinsicWidth = img.width.baseVal.value; // if svg's tag has absolute position, when converting through serializeToString, it will result in missing SVG content.
this.intrinsicHeight = img.height.baseVal.value; // 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)
} }
} }