fix: responsive svg images (#2583)

This commit is contained in:
Niklas von Hertzen 2021-07-14 20:44:04 +08:00 committed by GitHub
parent 1acdc827a4
commit 92fa448913
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 1 deletions

View File

@ -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;

View File

@ -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"/>
</g>
</svg>
<svg width="240" height="160" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
<svg width="50%" height="75%" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
<text x="40" y="20" class="html">html</text>
<text x="55" y="25" class="two">2</text>
<text x="65" y="35" class="canvas">canvas</text>