检索SVG <image> 元素的宽高比

Question

TLDR; 给定以下SVG元素：

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

如何获取图像的实际高度和宽度（因为它部分由图像的纵横比定义）。

---

我有一个绘制一堆<rect>和一堆<image>的d3js脚本。 现在布局是这样的，使得图像落在矩形内，就好像矩形是边框一样。矩形内还有其他东西。

现在，每个图像都有它自己独特而特殊的纵横比，这让我不舒服，因为这意味着每个矩形的空白空间都不同。这很不整洁。

为了避免这种情况，我想加载图像，然后获取实际图像尺寸，然后调整周围商品的位置和大小。问题的关键是获取实际的图像尺寸。我该怎么做？

我已经在谷歌上搜索了一些内容，并花了一些时间与调试控制台进行了详细的探索，但都没有结果。我会继续搜索，但如果能得到答案，那就太好了。

- Sheena

Answer 1

首先，只设置宽度属性，保持高度未指定。 然后，调用图像元素的getBBox。 请注意，在SVG正确渲染图像框后，图像框才可用。

"Original Answer"翻译成"最初的回答"

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

- Michael Rovinsky

Answer 2

这是我能想到的最好办法。如果没有更简单的方法，我会感到惊讶和恐惧。无论如何：

1. 添加一个正常的HTML <img> 元素，使用适当的src属性。
2. 使用JS获取图像的高度和宽度。
3. 删除多余的HTML代码。

丑陋但有效...

以下是一些代码：

var oImage = document.createElement("img");
oImage.setAttribute("src",sUrl);
document.body.appendChild(oImage);
var iWidth = oImage.width;
var iHeight = oImage.height;
oImage.remove();

- Sheena