Question

TLDR; 给出这个svg元素：

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

如何检索图像的实际高度和宽度（部分由图像的宽高比定义）。

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

现在，这些图像中的每一个都具有独特且特殊的宽高比，这让我感到困扰，因为这意味着每个图像都有不同的空白空间。这是不整洁的。

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

我已经搜索了一下，并在调试控制台上花了一些时间，但无济于事。什么都没有出现。我会继续打猎，但答案真的很好。

Answer 1

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

使用合适的<img>添加普通的html src元素。
使用js获取图像的高度和宽度
删除额外的html

丑陋但它有效......

这里有一些代码：

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

Answer 2

首先，仅设置 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);

检索svg <img/>

2 个答案: