javascript - 在 Firefox 中获取 SVG 的高度/宽度

Question

我正在尝试使用 image.width 和 image.height 获取在 JS 中创建的 SVG 元素的高度/宽度。

在 Chrome(最新)上，这会返回宽度和高度，其中 Base64 编码的 SVG 和数据 URI 都是 image.src。

但是，在 Firefox(最新)上，即使我设置了 image.onload 监听器，这些都返回 0。

示例

// base64 encoded SVG - EXPECTED 250x150
const base64String = new Image();
base64String.src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA5NS43IDU3LjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDk1LjcgNTcuNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yNi44LDE2LjljLTUuOC0wLjEtMTEuMSwyLjMtMTQuOSw2LjJjLTAuMi0xLjQtMC4zLTIuOC0wLjMtNC4yQzExLjgsOC43LDIxLjEsMi4zLDMxLjUsMi41TDI5LjcsMEMxMy40LTAuOCwwLjMsMTIsMCwyOAoJYy0wLjMsMTYsOS4yLDI5LjEsMjUuNiwyOS4zbDAtMC4xYzAuMiwwLDAuMywwLjEsMC40LDAuMWMxMS4yLDAuMiwyMC40LTguNywyMC42LTE5LjlDNDYuOSwyNi4zLDM4LDE3LjEsMjYuOCwxNi45Ii8+CjxwYXRoIGQ9Ik03NS44LDE2LjlDNzAsMTYuOCw2NC43LDE5LjMsNjEsMjMuMmMtMC4yLTEuNC0wLjMtMi44LTAuMy00LjJDNjAuOCw4LjgsNzAuMSwyLjQsODAuNiwyLjZsLTEuOC0yLjQKCUM2Mi40LTAuNyw0OS4zLDEyLjEsNDksMjhjLTAuMywxNiw5LjIsMjkuMSwyNS42LDI5LjNsMC0wLjFjMC4yLDAsMC4zLDAuMSwwLjQsMC4xYzExLjIsMC4yLDIwLjQtOC43LDIwLjYtMTkuOQoJQzk1LjksMjYuNCw4NywxNy4xLDc1LjgsMTYuOSIvPgo8L3N2Zz4K";

base64String.onload = function() {
  console.log(base64String.width, base64String.height); // Returns 250 150 on Chrome, 0 0 on FF
};

here's a JSBin显示问题。在 Chrome 和 FF 中打开它以查看不同的输出。那里还有一个 .jpg 作为控件，可以在两者中使用。

Answer 1

经过一些研究，浏览器似乎为没有尺寸的 SVG 提供了一些默认值，同时保留了宽高比，Chrome 的宽高比为 350x150。 Firefox 对于这些值返回 0。 source