通过javascript获取SVG图形的大小


Get size of SVG graphics by javascript

要在html页面中添加svg图形，通常使用对象标记像这样包装它：

1
2
3
4
5
6
7
8
9
10
11
<object id="svgid" data="mysvg.svg" type="image/svg+xml"
  wmode="transparent" width="100" height="100">

this browser is not able to show SVG: <a linkindex="3"
href="http://getfirefox.com">http://getfirefox.com
is free and does it!
If you use Internet Explorer, you can also get a plugin:

http://www.adobe.com/svg/viewer/install/main.html

</object>

如果未在object标签中使用width和height属性，则svg将以完整尺寸显示。 通常，我会从Open Graphics Library获取svg文件进行测试。 有没有办法通过使用JavaScript来获取svg的大小？ 或者，也许我应该只看svg xml文件以从顶部的svg标签中找出大小？

参见http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2

只要SVG文件位于同一域中，就可以访问HTML：object引用的SVG DOM(否则这将是一个安全漏洞。如果您的对象标记具有id =" myobj"，则可以执行以下操作：

1
2
3
var obj = document.getElementById("myobj"); // reference to the object tag
var svgdoc = obj.contentDocument; // reference to the SVG document
var svgelem = svgdoc.documentElement; // reference to the SVG element

然后，您可以通过以下方式访问svg元素的宽度/高度：

1
2
svgelem.getAttribute("width")
svgelem.getAttribute("height")

请注意，这些属性可能是" 100px"，" 300"，" 200em"，" 40mm"，" 100％"之类的内容，因此您需要仔细分析。

相关讨论

>是否可以使用JavaScript获取svg的大小？

不，是的。

没有：

JavaScript将无法访问浏览器中的SVG文件内容。

因此，不可能有一个包含任意SVG图像的页面，然后让JavaScript从SVG文件本身中确定任何内容。

页面DOM中包含的唯一数据JS可以访问它：原始标记以及对DOM的任何与JS相关的修改。您可以访问object元素的属性和后代节点，但是除了您自己查看页面标记之外，您将看不到任何东西。

是：

JS(在现代浏览器中)可以将任何XML字符串解析为DOM，然后使用基于DOM的方法访问内容。

您可以通过发出xmlHttpRequest样式的请求来获取SVG文件的内容(即JS在SVG文件的URL上执行HTTP GET)。然后，JS将拥有SVG文件的完整XML字符串，然后您就可以访问所需的任何内容。

>或者，也许我应该只查看svg xml文件以从顶部的svg标记中找出大小？

到目前为止，这将更加可行。

唯一基于JS的解决方案将要求JS对SVG文件的URL执行GET请求(如上所述)，这不太可行-每次页面加载都可能导致每个SVG文件的重复下载以及SVG的解析JS将XML转换为DOM可能会占用大量资源。

让JS检索SVG的XML内容并将其解析为DOM以仅检索图像尺寸是有点过大的。完全有可能，但通常不可行。

在将标记返回给浏览器之前，查询SVG的XML内容服务器端，确定合适的宽度和高度，然后动态添加width和height属性是您的最佳选择。

相关讨论

ES6：使用async/await，您可以按照类似序列的方式进行操作

1
2
3
4
5
6
7
8
async function getImage(url) {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    });
}

并使用以上功能：

1
2
3
let img = await getImage("yourimage.svg");
let w = img.width;
let h = img.height;

只要SVG文件位于同一域中，就可以使用它(此处有详细信息)。

Is there any way to get svg's size by
using JavaScript?

是

1
2
3
4
5
6
var filesize = function(url, requestHandler) {
  var requestObj = new XMLHttpRequest();  
  requestObj.open('head', address, true);  
  requestObj.onreadystatechange = callback;
  requestObj.send(null);  
};

现在一个处理函数：

1
2
3
4
5
6
7
8
9
var requestHandler = function(result) {
    if (this.readyState === 1) {
        this.abort();
    }
    return this.getResponseHeader("Content-length");
};

var size = fileSize("http://whatever.org/someSVGFile.svg", requestHandler);
alert(size);

那应该返回svg或其他任何文件的文件大小。服务器配置是唯一可能会干扰的内容。

相关讨论