未设置 <svg> 上的宽度/高度属性时获取 svg 图形大小答案

【问题标题】：Get svg graphics size when width/height attributes on <svg> are not set未设置 <svg> 上的宽度/高度属性时获取 svg 图形大小
【发布时间】：2014-12-30 19:18:31
【问题描述】：

那么，当 svg 元素上没有设置宽度和高度时，如何使用 javascript 获取 SVG 文件的大小？ svg 是一个字符串，但如果有必要可以做成一个 DOM。

【问题讨论】：

标签： javascript svg

【解决方案1】：

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

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

我想这就是你要找的东西。

编辑：

我最近还了解到鲜为人知的getBoundingClientRect() 也可以工作！你也可以这样做：var el = document.getElementById('myelem'); var mywidth = el.getBoundingClientRect().width;
请记住，getBBox 和 getBoundingClientRect 之间存在差异。 getBBox 获取初始尺寸 - getBoundingClientRect 还尊重使用比例等完成的转换。

【讨论】：

getBBox 返回{[..], width: 0, height: 0}，getBoundingClientRect 也是如此。后者不仅适用于 FireFox。
不要用 jQuery 包装你的元素（比如 $(yourElement) ），因为 getBBox 不是一个函数。
您可以使用jQuery来选择元素，您只需要在获取非jQuery dom元素之后添加“[0]”...即$(yourElement)[0].getBoundingClientRect( ).高度
jQuery 充其量是外围相关的。

【解决方案2】：

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

【讨论】：

非常感谢，我知道这一点，但在我制作的 SVG Viever 小部件中（my.opera.com/SpShut/blog/show.dml/5803641）我需要显示 SVG 文件的缩略图（比如 100x100），如果文件既没有宽度/ height 和 viewBox 属性，它以 some size 显示，并且只有 100x100 部分可见。我想以某种方式处理文件以获取尺寸并设置宽度/高度和 viewBox 属性。
你必须对它做出假设。如果您的拇指是 100x100，那么为什么不以 100x100 显示 SVG？
我设置如果 file.svg 没有 width&height&viewBox 只有 100x100 部分，如果它显示。我想确定图形的大小，设置属性并重写磁盘上的文件，所以假设是行不通的。任何想法如何做到这一点？
标签中没有设置高度和宽度，因此没有固有尺寸。您可以查看 svg 中的每个元素并查看最大的 x + 宽度和最大的 y + 高度，并将其称为大小。我不确定你会从中获得什么好处。从概念上讲，如果不是固有的高度和宽度，您认为尺寸是多少？
谢谢，x+width & y+height 是一个不错的变体！是的，我的意思是我需要知道内在的高度和宽度。如果我设置这三个属性，图像将始终适合对象标签的尺寸，而不是被切掉。你会不会这么好心地编写一种 if-else 算法来计算宽度和高度，因为我不是一个程序员，自己也无法弄清楚。我找到了一个可能会有所帮助的页面my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg 此处提供徽章的按钮在哪里？