如何在svg文档中获取嵌入图像的真实（未缩放）大小？ [英] how to get the real (unscaled) size of an embedded image in the svg document?!

问题描述

我有一个SVG文件，其中包含图像条目：

I have a SVG document with the image entry in it:

<image id="image12975" x="30" y="40" width="30" height="45"
xlink:href="img/Akira1.jpg">    
</image>

我已经在Javascript中获取了SVG图像：

I have fetched the SVG Image in Javascript by doing:

var imgE = document.getElementsByTagName('rect');
document.getElementById('test').innerHTML = imgE;

在Javascript中带给我 [object SVGImageElement] 。

brings me the [object SVGImageElement] in Javascript.

通过迭代对象，我有一个完整的功能和属性子集。函数getBBox（）的 height 和 width 仅给出了定义为width（30）和height（45）的属性值。

By iterating the object I have a full subset of functions and attributes. height and width of the function "getBBox()" bring me only the attribut values defined as width (30), and height (45).

我正在寻找真正的参数，就像我单独打开图片一样，实际上是宽度=300，高度=430像素。

I am looking for the real parameters, like I would open the picture alone, which are in reality width="300" and height="430" pixels.

对于任何支持我都会感谢你

for any support I would kindly thank you

Tamer

推荐答案

我想到了如何在Javascript侧面完全解决这个问题，而不用进行任何XHR调用或者任何操作。

I figured out how to solve it entirely on the Javascript side level, without doing any XHR calls or whatever!

然而，SVG没有任何dom函数来确定图片的缩放大小。

However, SVG doesn't have any dom functions to figure out the unscaled size of a picture.

Sollution！

Sollution!

获取SVGImageElement对象和它是从属性的URL：

Grab the SVGImageElement Object and it's URL from the attribute:

var myPicXE = document.getElementsByTagName('image')[0];
var address = myPicXE.getAttribute('xlink:href');

创建一个图像对象并分配它的src地址：

create an Image Object and assign it's src addres:

var myPicXO = new Image();
myPicXO.src = address;

并轻轻地询问它的高度和宽度：

and ask gently for it's height and width:

myPicXO.width;
myPicXO.height;

应该也可以使用base65jpeg内联图片（ http://en.wikipedia.org/wiki/Data_URI_scheme ）

should work also work wit base65jpeg inline images ( http://en.wikipedia.org/wiki/Data_URI_scheme )

就是这样！

这篇关于如何在svg文档中获取嵌入图像的真实（未缩放）大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！