From 92fa448913192d5e4e82bfe14f6644b669d4e6ef Mon Sep 17 00:00:00 2001 From: Niklas von Hertzen Date: Wed, 14 Jul 2021 20:44:04 +0800 Subject: [PATCH] fix: responsive svg images (#2583) --- src/dom/replaced-elements/svg-element-container.ts | 5 +++++ tests/reftests/images/svg/native_only.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/dom/replaced-elements/svg-element-container.ts b/src/dom/replaced-elements/svg-element-container.ts index 118f9bef5..62511bed7 100644 --- a/src/dom/replaced-elements/svg-element-container.ts +++ b/src/dom/replaced-elements/svg-element-container.ts @@ -1,5 +1,6 @@ import {ElementContainer} from '../element-container'; import {CacheStorage} from '../../core/cache-storage'; +import {parseBounds} from '../../css/layout/bounds'; export class SVGElementContainer extends ElementContainer { svg: string; @@ -9,6 +10,10 @@ export class SVGElementContainer extends ElementContainer { constructor(img: SVGSVGElement) { super(img); const s = new XMLSerializer(); + const bounds = parseBounds(img); + 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; diff --git a/tests/reftests/images/svg/native_only.html b/tests/reftests/images/svg/native_only.html index 95709a83d..341258c3a 100644 --- a/tests/reftests/images/svg/native_only.html +++ b/tests/reftests/images/svg/native_only.html @@ -34,7 +34,7 @@ style="fill:#40aa54;fill-opacity:1;stroke:#20552a;stroke-width:7.99999952;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/> - + html 2 canvas