SVG：获得路径的精确边界框？答案

【问题标题】：SVG: getting a precise bounding box of a path?SVG：获得路径的精确边界框？
【发布时间】：2012-06-16 05:34:59
【问题描述】：

至少在 WebKit 中的 SVGPath.getBBox() 实现似乎有些粗制滥造；有没有比走路径（或随机反复采样）、手动计算其可能的边界框以获得良好读数更好（更便宜）的方法？

http://bl.ocks.org/2939938（或https://gist.github.com/2939938）显示了后者的一个示例，当我在几个不同的相当现代的浏览器中运行它时，本机实现存在显着差异。 Opera 是最好的，Firefox 好，Chrome / Safari 很差：

616.1572 677.0540 127.6856 126.8793 - sampled, gathering random coords for 5s (reference)
616.1569 677.0538 127.6860 126.8796 - opera 11.64 build 1403
616.1563 677.0547 127.6875 126.8789 - firefox aurora 15.0a2 (2012-06-15)
614.2805 673.9761 136.2089 129.9573 - chrome canary 21.0.1176.0
614.2805 673.9761 136.2089 129.9573 - safari 5.1.7 (7534.57.2)

或者，参考边界框的左/上/宽/高变化百分比：

0.00005% 0.00003% 0.00031% 0.00024% - opera
0.00015% 0.00010% 0.00149% 0.00032% - firefox
0.30458% 0.45460% 6.67522% 2.42593% - chrome
0.30458% 0.45460% 6.67522% 2.42593% - safari

【问题讨论】：

如果您指定边界框的用途以及分析的路径类型，这可能有助于我们建议适当的解决方案或更好的近似值。
我目前的主要兴趣是为单路径元素 SVG:s 导出精确的 viewBox 属性，如链接的示例中所示，它完美地适合图形，使其无需裁剪或缩放额外的填充。

标签： javascript browser svg

【解决方案1】：

事实证明Raphael.js 实现了一个相当出色的Raphael.pathBBox，特别是在你有一个<path> 元素的情况下；它似乎在代数上是精确的，而且速度很快。添加到对比测试页面。

【讨论】：

根据您在问题中链接的代码，Firefox 的本机 getBBox 现在与 Raphael 的一样精确，尽管 Chrome 仍然相差几个像素。