通过javascript获取SVG图形的大小

StackOverflow https://stackoverflow.com/questions/231679

  •  04-07-2019
  •  | 
  •  

题

要在html页面中添加svg图形，通常使用object标签将其包装为：

<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</a> 
is free and does it!
If you use Internet Explorer, you can also get a plugin: 
<a linkindex="4" href="http://www.adobe.com/svg/viewer/install/main.html">
http://www.adobe.com/svg/viewer/install/main.html</a>

</object>

如果您不在object标签中使用width和height属性，则svg将以完整大小显示。通常我从Open Graphics Library获取svg文件进行测试。有没有办法通过使用JavaScript获得svg的大小？或者我可以只看一下svg xml文件，找出顶级svg标签的大小？

没有正确的解决方案

其他提示

请参阅 http：//dev.opera。 COM /物品/视图/ SVG的演进未转/？页= 2

只要SVG文件位于同一个域中，就可以访问由HTML：对象引用的SVG DOM（否则这将是一个安全漏洞。如果你的对象标签有id =＆quot; myobj＆quot;你会这样做：

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元素的宽度/高度：

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

注意，这些属性可以是诸如“100px”，“300”，“200em”，“40mm”，“100％”之类的东西。所以你需要仔细解析它。

<强>＆GT;有没有办法通过使用JavaScript获得svg的大小？

不，是的。

否：

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

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

JS可以访问包含在页面DOM中的唯一数据：原始标记以及对DOM的任何JS相关修改。您可以访问 object 元素的属性和后代节点，但如果您自己查看页面标记，那么除了您可以看到的内容之外，这不会让您看到任何内容。

是：

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

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

<强>＆GT;或者我可以只看一下svg xml文件，找出顶级svg标签的大小？

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

唯一基于JS的解决方案需要JS在SVG文件的URL上执行GET请求（如上所述），这不太可行 - 每个页面加载可能导致双重下载每个SVG文件，并且解析通过JS将SVG的XML转换为DOM可能过于耗费资源。

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

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

ES6 ：使用 async / await ，您可以按顺序执行此操作

async function getImage(url) {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    });
}

并使用上述功能：

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

只要SVG文件位于同一个域中，您就可以使用它（详情请此处）。

  

有没有办法获得svg的大小   使用JavaScript？

是 

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

现在处理功能：

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或任何其他文件的文件大小。服务器配置是唯一可能会干扰的内容。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top