chrome如何确定SVG大小答案

【问题标题】：How does chrome determines SVG sizechrome如何确定SVG大小
【发布时间】：2021-04-13 23:31:16
【问题描述】：

我想在 vanilla javascript 中通过 base64 加载图像。所以我使用了这段代码（代码简化以表明我的观点）：

let FR = new FileReader();
FR.addEventListener("load", function(e) {
  let img = new Image;
  img.onload = function() {
    console.log(`image size : ${this.width}x${this.height}`);
  };
  img.src = FR.result;
});
FR.readAsDataURL( value.files[0] );

但是，当我加载只有一个视图框且没有高度/宽度的 SVG 时，Safari 和 Chrome 上的大小不一样。 Safari 似乎使用视图框作为其大小的基础，而 Chrome 似乎选择随机值。

示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.92 41.51"><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path d="M21.78,37a2.62,2.62,0,0,0,3.7,3.7,19.79,19.79,0,0,1,28,0,2.62,2.62,0,0,0,3.7-3.7A25,25,0,0,0,21.78,37Z" style="fill:#192736"/><path d="M11.13,26.39a2.62,2.62,0,1,0,3.7,3.7,34.87,34.87,0,0,1,49.26,0,2.62,2.62,0,0,0,3.7-3.7A40.11,40.11,0,0,0,11.13,26.39Z" style="fill:#192736"/><path d="M39.46,0A54.32,54.32,0,0,0,.77,16a2.61,2.61,0,1,0,3.69,3.7,49.49,49.49,0,0,1,70,0,2.62,2.62,0,1,0,3.7-3.7A54.36,54.36,0,0,0,39.46,0Z" style="fill:#192736"/></g></g></svg>

在 Safari 上，图像的高度为 79x42，而 Chrome 显示为 285x150。因此，当我处理图像的高度和宽度时，我会在 Safari 和 Chrome 上获得不同的结果。

显而易见的答案是在 SVG 本身上明确设置宽度和高度，但我真的很想知道为什么会发生这种情况以及如何防止它发生。

【问题讨论】：

标签： javascript google-chrome svg safari

【解决方案1】：

就 html/css 规范而言，外部 <svg> 元素在技术上是一个替换元素。如果无法确定被替换元素的大小，则浏览器应回退到 300 x 150 像素的大小。

Chrome 无法确定大小，所以它使用的是什么。请注意，viewBox 只能用于定义页面的纵横比，而不是任何绝对大小，因此 Chrome 似乎使用 150 和 viewBox 纵横比来产生 285，即 150 x 78.92 / 41.51 ≈ 285.2

Safari 的渲染看起来不正确，因为这里没有定义大小。 viewBox 决定了内部坐标系和纵横比，它也不应该用于确定外部尺寸，这就是 width 和 height 属性的用途。

简而言之，如果您希望跨浏览器正常运行，请使用宽度和高度属性或 CSS 属性。

【讨论】：