javascript - 如何获取 svg 文档中嵌入图像的真实(未缩放)大小？!

Question

我有一个包含图像条目的 SVG 文档:

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

我通过以下方式获取了 Javascript 中的 SVG 图像:

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

给我带来 Javascript 中的 [object SVGImageElement]。

通过迭代对象，我得到了函数和属性的完整子集。函数“getBBox()”的height 和width 只给我定义为宽度(30) 和高度(45) 的属性值。

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

谢谢大家的支持

驯服

Answer 1

我想出了如何完全在 Javascript 端解决它，而无需进行任何 XHR 调用或其他任何操作!

但是，SVG 没有任何 dom 函数来计算图片的未缩放大小。

解决方案!

从属性中获取 SVGImageElement 对象及其 URL:

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

创建一个图像对象并为其分配 src 地址:

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

然后轻轻地询问它的高度和宽度:

myPicXO.width;
myPicXO.height;

应该也可以使用 base65jpeg 内联图像 ( http://en.wikipedia.org/wiki/Data_URI_scheme )

就是这样!