Question

要在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标签的大小？

Answer 1

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

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

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％”之类的内容，因此您需要仔细解析它。

Answer 2

<强>＆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属性将是您最好的选择。

Answer 3

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文件位于同一域（详细信息here），就可以使用它。

Answer 4

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

通过javascript获取SVG图形的大小

4 个答案: