javascript - 检索 svg 的纵横比

Question

TLDR；给定这个 svg 元素:

<image width="30" height="48" x="3.75" y="6" href="http://some/image.jpg">

如何检索图像的实际高度和宽度(部分由图像的纵横比定义)。

---

我有一个 d3js 脚本可以绘制一堆 <rect> s 和一堆 <image>秒。现在布置了东西，使图像落在矩形内，就好像矩形是边界一样。 rects 里面还有其他东西。

现在，这些图像中的每一个都有自己独特且特殊的纵横比，这让我很困扰，因为这意味着每个矩形都有不同数量的空白空间。这是不整洁的。

为了避免这种情况，我想加载图像，然后获取实际图像尺寸，然后调整周围元素的位置和大小。问题的症结在于获取实际图像尺寸。我该怎么做？

我用谷歌搜索了一下，花了一些时间在调试控制台上，但无济于事。什么也没有发生。我会继续寻找，但答案会非常好。

Answer 1

首先，只设置width 属性，不指定height。然后，为图像元素调用 getBBox。请注意，图像框在由 SVG 正确渲染后可用

const image = parent.append('image').attr('xlink:href', url).attr('width', 100);
setTimeout(() => {
    const box = image.node().getBBox();
    const ratio = box.width / box.height;
}, 0);