当<svg>标签上的宽度/高度属性未设置时，如何获取SVG图形的大小

Question

当SVG元素上未设置宽度和高度时，如何使用JavaScript获取SVG文件的大小？该SVG为字符串，但可以转换为DOM（文档对象模型）。

- Spadar Shut

Answer 1

您可以使用SVGElement对象的getBBox()方法。它会告诉您元素的宽度和高度、x和y偏移量（以像素为单位），而不考虑元素的缩放。

document.getElementById('myelem').getBBox().width  
document.getElementById('myelem').getBBox().height

我认为这些是你正在寻找的。

编辑：

1. 最近我也学到了一个鲜为人知的方法getBoundingClientRect()！你也可以这样做：var el = document.getElementById('myelem'); var mywidth = el.getBoundingClientRect().width;

2. 请注意，getBBox和getBoundingClientRect之间存在差异。 getBBox获取初始尺寸-getBoundingClientRect还考虑了使用缩放等变换所进行的变换。

- KeatsKelleher

---

getBBox返回{[..], width: 0, height: 0}，getBoundingClientRect也是如此。后者仅在FireFox中无法使用。 - Gajus

不要使用jQuery将元素包装起来（例如$(yourElement)），因为getBBox函数无法使用。 - Cedric

你可以使用jQuery选择元素，只需要在后面添加"[0]"即可获取非jQuery dom元素...例如$(yourElement)[0].getBoundingClientRect().height - Robert Waddell

jQuery 最多只是辅助相关的。 - KeatsKelleher

Answer 2

SVG是可缩放矢量图形，因此可以具有任意的高度和宽度。只有比例由格式固定。

- jball

---

非常感谢，我知道这个问题，但是在我制作的SVG Viewer小部件(http://my.opera.com/SpShut/blog/show.dml/5803641)中，我需要显示SVG文件的缩略图(比如100x100)，如果一个文件既没有宽度/高度属性，也没有viewBox属性，那么它将以某种大小显示，并且只有100x100的一部分可见。我想对文件进行处理，以获取其尺寸并设置宽度/高度和viewBox属性。 - Spadar Shut

那么你就得做一个假设。如果你的拇指是100x100，为什么不将SVG显示为100x100呢？ - jball

我设置了 <object class="thumbnail" width="100px" height="100px" data="file.svg" />，如果 file.svg 没有 width、height 和 viewBox，那么只有 100x100 的部分被显示。我想确定图形的大小，设置属性并重写磁盘上的文件，因此假设是不可行的。有什么方法可以做到这一点吗？ - Spadar Shut

如果在标签中没有设置高度和宽度，那么就没有内在大小。你可以浏览svg中的每个元素，查看最大的x +宽度和最大的y +高度，并将其称为大小。我不确定你从中获得了什么优势。如果没有内在高度和宽度，从概念上讲，你认为大小是什么？ - jball

谢谢，x+width和y+height是一个不错的变体！是的，我需要知道内在高度和宽度。如果我设置这三个属性，图像将始终适合对象标记的尺寸，而不是被裁剪掉。您能否写出一种if-else算法来计算宽度和高度，因为我不是很擅长编程，无法自己解决。我发现这个页面可能会有所帮助http://my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg那个发放徽章的按钮在哪里？ - Spadar Shut

你也可以尝试使用 'img' 元素代替 'object'，因为只要在 svg 中设置了 'width' 和 'height'，它就会自动生成 viewBox。 - Erik Dahlström