10

要在 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>

如果您不在对象标签中使用宽度和高度属性，则 svg 将以全尺寸显示。通常我从 Open Graphics Library 获取 svg 文件进行测试。有没有办法通过使用 JavaScript 来获取 svg 的大小？或者也许我应该只查看 svg xml 文件以找出顶部 svg 标记的大小？

4

4 回答 4

10

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

只要 SVG 文件位于同一个域中，就可以访问 HTML:object 引用的 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%”之类的东西，因此您需要仔细解析。

于 2009-10-16T12:54:00.627 回答
5

> 有没有办法通过使用 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 字符串，然后您可以访问任何您喜欢的内容。

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

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

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

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

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

于 2008-10-24T14:42:21.757 回答
1

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 文件在同一个域中，您就可以使用它（详情请参阅此处）。工作示例

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

async function start() {
  // here is example url with embeded svg but you can use any url
  let svgURL = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='120' width='220'%3E%3Cellipse cx='110' cy='60' rx='100' ry='50' stroke='black' stroke-width='3' fill='red' /%3E%3C/svg%3E";
  
  let img = await getImage(svgURL);
  let w = img.width;
  let h = img.height; 
  
  // print
  console.log({w,h});
  pic.src = svgURL;
}

start();
<img id="pic">

于 2018-09-19T17:55:31.563 回答
-6

有没有办法通过使用 JavaScript 来获取 svg 的大小？

是的

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

于 2010-10-17T04:10:33.233 回答