Question

是否有任何准确的方法来获取svg元素的实际大小，其中包括笔画，滤镜或其他元素，这些元素在Javascript中有助于元素的实际大小？

我已经尝试了很多东西，现在我觉得我已经走到了尽头： - （

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

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);

至少在所有主要浏览器的实际版本中都支持它。

Check fiddle

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

Answer 3

您没有指定任何编程语言。所以我建议使用Inkscape。

在文件菜单中，您可以找到文档的属性，在第一页中有“将页面调整为内容”命令。通过这种方式，您可以移除绘制周围的所有空白区域，并且可以看到实际大小。宽度和高度值在svg。

的标题内显示后

我知道Inkscape支持脚本和命令行操作，但我不知道是否可以通过这种方式进行修剪操作。但是，如果有可能，你可以从每种编程语言中做到这一点。

Answer 4

以下是使用 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());

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

4 个答案:

Check fiddle