如何获取 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) 的属性值。

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

如果有任何支持，我会非常感谢

Tamer

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 ）

就是这样！

Answer 2

我做了一些研究，但无法发现可以枚举以获得图像实际宽度和高度的属性。然而，还有另一种方法似乎很有趣，其中包括一个 xmlHttpRequest 来获取图像并枚举它的尺寸。

这让我想到了一个稍微快一点的方法。解决方案是利用隐藏的

作为工作容器，并下拉必要的图像（使用 ），您可以在其中枚举宽度和高度。这个伪代码例如：

• 迭代图像集合
• 创建一个具有适当 src 路径的图像节点
• 将新节点附加到 div#ImageEnumeration
• 枚举检索到的图像

有帮助的话），这里是 xmlHttpRequest 的一些代码草稿：

var imgRequest = 
  function(sImgUrl, oRequestCallback){
    var xhr = new XMLHttpRequest();  
    xhr.open('GET', sImgUrl, true);  
    xhr.onreadystatechange = oRequestCallback;
    xhr.send(null);  
    };

var xhrImageRequest =
  function(result){
    var oImageDimensions;
    //Create and append <img> to <div #ImageEnumeration>
    //Get image width and height
    //return image width and height
    };

var myImage = imgRequest("http://example.com/myImage.png", xhrImageRequest);

只是为了笑（如果 这并不能解决你的问题，我希望它至少能创造一些新的想法来解决它。