javascript 获取 SVG/G 元素的实际大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9847684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the real size of a SVG/G element
提问by Emil
Is there any accurate way to get the real size of a svg element that includes stroke, filters or other elements contributing to the element's real size from within Javascript?
是否有任何准确的方法可以从 Javascript 中获取 svg 元素的实际大小，其中包括笔触、过滤器或其他有助于元素实际大小的元素？
I have tried pretty much everything coming to my mind and now I feel I'm coming to a dead end :-(
我已经尝试了几乎所有想到的东西，现在我觉得我走到了死胡同:-(
Updated question to add more context (Javascript)
更新问题以添加更多上下文（Javascript）
回答by Christoph
You can't get the values directly. However, you can get the dimensions of the bounding rectangle:
您无法直接获取值。但是，您可以获得边界矩形的尺寸：
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);
It is supported at least in the actual versions of all major browser.
至少在所有主要浏览器的实际版本中都支持它。
Check fiddle
检查小提琴
回答by Thaddeus Albers
Both raphael js http://dmitrybaranovskiy.github.io/raphael/and d3 js http://d3js.org/have various methods to find the size of an svg object or sets of svg object. It depends on if it's a circle, square, path, etc... as to which method to use.
I suspect you are using complex shapes, so in that case bounding box would be your best bet http://raphaeljs.com/reference.html#Element.getBBox(Edit: updated reference site.) http://dmitrybaranovskiy.github.io/raphael/reference.html#Element.getBBox
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
回答by kiewic
Here is an example using D3.js:
这是一个使用D3.js的示例：
Starting with a div:
从div开始：
<div style="border:1px solid lightgray;"></div>
The javascript code looks like this:
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());
回答by pluka
You didn't specify any programming language. So I can suggest to use Inkscape.
您没有指定任何编程语言。所以我可以建议使用Inkscape。
In the file menu you find document's properties and in the first page there's "resize page to content" command. In this way you remove all the white space around your draw and you see the real size. After width and height values apprear inside the header of svg.
在文件菜单中，您可以找到文档的属性，在第一页中有“将页面大小调整为内容”命令。通过这种方式，您可以删除绘图周围的所有空白区域，您会看到实际大小。在宽度和高度值出现在 svg 的标题中之后。
I know that Inkscape supports scripting and command line operations but I don't know if it's possible to do the trimming operatation in this way. But if it's possible you can do that from every programming language.
我知道Inkscape支持脚本和命令行操作，但不知道是否可以通过这种方式进行修剪操作。但是，如果可能的话，您可以从每种编程语言中做到这一点。
