获取SVG/G元素的实际大小

Question

有没有一种准确的方法可以从JavaScript内部获取包括描边、滤镜或其他对元素实际大小有贡献的元素在内的SVG元素的真实大小？

我已经尝试了我能想到的几乎所有方法，现在感觉走到了死胡同 :-(

更新问题以添加更多上下文（JavaScript）

- Emil

---

这个应该翻译成屏幕空间，还是保留在SVG文档的坐标系中？ - Phrogz

这里有一个（不好的？）想法：将修改后仅包含元素本身的SVG的副本绘制到HTML画布上，然后测试画布像素的透明度以找到边界框。 - Phrogz

@Phrogz - 我也考虑过这个问题，但除了性能影响之外，还有安全限制阻止我在画布中绘制任意SVG，至少对于Gecko/Firefox而言是如此。我并不真的关心坐标，因为我可以相当容易地进行前后转换。 - Emil

请注意，即使对画布的所有像素进行蛮力边界框计算，性能也不错。链接。 - Phrogz

确实，非常不错...但是我无法在画布上绘制复杂的组。 - Emil

Answer 1

直接获取值是不可能的，但是您可以获取边界矩形的尺寸：

var el   = document.getElementById("yourElement"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle

console.log( rect.width );
console.log( rect.height);

它至少在所有主流浏览器的最新版本中得到支持。

查看演示

- Christoph

---

请注意，a) 这是在屏幕空间而不是 SVG 单位空间中，但更重要的是 b) 这不考虑描边宽度。 - Phrogz

@RobertLongson 嗯，我刚刚检查了IE、FF、Chrome和Opera...没有Safari...虽然它的市场份额比Opera还要高，但我仍经常忘记将其视为主要浏览器...我的错;) - Christoph

@Christoph 我已经在许多浏览器中尝试了 getBoundingClientRect ，但没有一个允许描边宽度。我很想看到这种方法的“证明”？ - DeadPassive

“允许笔画宽度”是什么意思？如果您查看http://jsfiddle.net/zLZSw/30/，您会发现除了webkit / blink引擎外，当计算边界矩形时会考虑笔画宽度。 - Christoph

@Christoph 在 Firefox 中，我得到了 c1: 45.916... c2: 68.866... 在 Chrome 中，我得到了相同的 c1 和 c2，但它与 Firefox 中的任何一个数字都相差36.600...。你能解释一下吗？ - Victoria

Answer 2

Raphael JS http://dmitrybaranovskiy.github.io/raphael/和D3 JS http://d3js.org/都有各种方法来查找SVG对象或一组SVG对象的大小。这取决于是圆形、正方形、路径等等，要使用哪种方法。
我怀疑您正在使用复杂的形状，在这种情况下，边界框将是最好的选择http://raphaeljs.com/reference.html#Element.getBBox （编辑：更新参考网站。）http://dmitrybaranovskiy.github.io/raphael/reference.html#Element.getBBox

- Thaddeus Albers

---

它从http://raphaeljs.com移动到http://dmitrybaranovskiy.github.io/raphael/。我已经更新了链接。 - Thaddeus Albers

Answer 3

这是一个与 D3.js 相关的示例：

首先从一个 div 开始：

<div style="border:1px solid lightgray;"></div>

这段JavaScript代码看起来像这样：

var myDiv = d3.select('div');
var mySvg = myDiv.append('svg');
var myPath = mySvg.append('path');
myPath.attr({
    'fill': '#F7931E',
    'd': 'M37,17v15H14V17H37z M50,0H0v50h50V0z'
});

// Get height and width.
console.log(myPath.node().getBBox());

- kiewic

---

顺便提一下，你可以尝试使用myPath.node().getBBox()作为替代方案来访问数组。 - ryanm

谢谢@ryanm，使用node()看起来更简洁。 - kiewic

Answer 4

如果你正在使用React，并且它是作为CSS背景图像使用的SVG，那么你可以使用background-image-size-hook。

import { useBackgroundImageSize } from 'background-image-size-hook'

const App = () => {
  const [ref, svg] = useBackgroundImageSize()

  console.log(svg) // { width, height, src }

  return <SVGBackgroundImageComponent ref={ref} />
}

- morganney

Answer 5

您没有指定任何编程语言。因此，我建议使用Inkscape。

在文件菜单中，您可以找到文档属性，在第一页中有“调整页面大小以适应内容”的命令。通过这种方式，您可以删除绘图周围的所有空白，并查看实际大小。然后，宽度和高度值将出现在svg的页眉中。

我知道Inkscape支持脚本和命令行操作，但我不知道是否可以以这种方式进行修剪操作。但是，如果可能的话，您可以从任何编程语言中执行该操作。

- pluka

---

抱歉，我指的是浏览器环境和 Javascript。 - Emil