svg - 使用 Raphael 如何保持图像的纵横比

Question

我想通过增加图像的宽度来保持图像的纵横比。创建图像时，我只是在做

paper.image(inputUrl, 100,100,500,600);

我不想为图像设置高度 600，而是希望 svg 根据原始图像的纵横比计算它。

我确实看到了 preserveAspectRatio="none"，如何使用 Raphael.js 根据我的需要进行更改

<image x="5" y="5" width="800" height="0" preserveAspectRatio="none" xlink:href="http://whiteboard.veeralab.com:8091/public/images/3a/a82/1dc-740e-4137-9ac0-d3d10b68708a.jpg" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>

Answer 1

您可以预加载图像并计算必要的尺寸：

var img = document.createElement('img');
img.onload = function() {

    // At this point, img.width and img.height
    // contain actual dimensions of the image.
    // Calculate scaled dimensions and add image to Raphael.

    delete img;
};
img.setAttribute('src', inputUrl);