diff --git a/src/dom/replaced-elements/svg-element-container.ts b/src/dom/replaced-elements/svg-element-container.ts index ae9c5a4..45f842a 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) } }