通过javascript获取SVG图形的大小

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

> 有没有办法通过 JavaScript 获取 svg 的大小？

不，是的。

不：

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

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

JS 可以访问包含在页面 DOM 中的唯一数据：原始标记加上对 DOM 的任何与 JS 相关的修改。您可以访问object元素的属性和后代节点，但是除了您自己查看页面标记时所能看到的内容之外，您无法看到更多内容。

是的：

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

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

> 或者我应该查看 svg xml 文件以找出顶部 svg 标签的大小？

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

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

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

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