javascript - 调整大小后获取 svg 图像的实际大小

Question

我在 svg 标签中有一张图片。当我更改图像的宽度(或高度)时，高度(或宽度)也会更改以保持比例。但是我无法获得高度(或宽度)的新值。

举个例子: https://plnkr.co/edit/NrovrUKAv8KRGLPdjDpG?p=preview

我们可以看到，虽然宽度和高度都减小了，但只有宽度值发生了变化。我尝试使用 d3js 获取高度，但值仍然相同。

d3.select("图片").attr("高度")

Answer 1

虽然它看起来是图像的高度在下降，但它实际上不仅仅是它通过 changing width * 219 自动调整到框架中的方式。通过一个简单的示例，当尝试将 800*600 图像作为 1920*768 屏幕中的墙纸 时会发生什么。检查下图以查看您的图像实际占用了多少屏幕。

如果你真的想调整你的照片，那么你需要相应地调整你的高度并重新计算这两个值:

 var height = parseInt(d3.select("image").attr("height"));
    d3.select("image").attr("height", height / 2);

这是一个 example .