检索svg< image>的宽高比。 [英] retrieving the aspect ratio of an svg <image>
问题描述
TLDR;
给定此svg元素：
TLDR; given this svg element:
<image width="30" height="48" x="3.75" y="6" href="http://some/image.jpg">
如何检索图像的实际高度和宽度（因为它部分由图像定义）宽高比）。
How can I retrieve the image's actual height and width (seeing as it is defined in part by the image's aspect ratio).
我有一个d3js脚本，可以绘制一堆< rect> s和一堆< image> s。
现在布置了一些东西，以便图像落在rects中，就像rects是边框一样。在里面还有其他的东西。
I have a d3js script that draws a bunch of <rect>s and a bunch of <image>s.
Now stuff is laid out so that the images fall inside the rects, as though the rects were borders. There is other stuff inside the rects too.
现在每个图像都有自己独特的特殊宽高比，这让我感到困扰，因为这意味着每个图像都有不同的空白区域。这是不整洁的。
Now each of these images has it's own unique and special aspect ratio and this bothers me because it means each of the rects then has a different amount of blank space. This is untidy.
为了避免这种情况，我想加载图像然后获取实际的图像尺寸，然后调整周围物品的位置和大小。问题的关键在于获得实际的图像尺寸。我怎么能这样做？
To avoid this I want to load the images then get the actual image dimensions and then adjust the positions and sizes of the surrounding goodies. The crux of the matter is getting the actual image sizes. How can I do this?
我已经google了一下，并且花了一些时间在调试控制台上无济于事。什么都没有出现。我会继续打猎，但答案真的很好。
I've googled around a bit and spent some quality time with the debugging console to no avail. Just nothing comes up. I'll keep hunting but an answer would be really nice.
推荐答案
这是我能想到的最好的。如果没有更简单的方法，我会感到惊讶和恐惧。无论如何：
This is the best I can come up with. I would be surprised and horrified if there isn't an easier way. Anyway:
- 使用合适的<添加正常的html
< img>元素code> SRC 。 - 使用js获取图像的高度和宽度
- 删除额外的html
- add a normal html
<img>element with a suitablesrc. - use js to fetch the image height and width
- remove the extra html
丑陋但有效......
Ugly but it works...
以下是一些代码：
var oImage = document.createElement("img");
oImage.setAttribute("src",sUrl);
document.body.appendChild(oImage);
var iWidth = oImage.width;
var iHeight = oImage.height;
oImage.remove();
这篇关于检索svg< image>的宽高比。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
